首先延續先前的首頁介面展示,幾個跳轉navigator的使用,接著是各功能模組的功能使用
一、text展示
使用按鈕,進行文字的新增與減少,程式碼如下:
text展示
{{text}}
新增文字
減少文字
JS互動操作:
//初始化一个文字参数 var initText = '这是第一个文字n这是第二个文字' Page({ data: { text: initText }, //初始化一个空的文字串 extraLine: [], //添加按钮点击事件 add: function(e) { //在文字串中添加文字,push this.extraLine.push('添加的其他文字') //设置数据 this.setData({ text: initText + 'n' + this.extraLine.join('n') }) }, //减少按钮点击事件 remove: function(e) { //判断文字串是否大于0,如果大于0,减少,反之,不操作 if (this.extraLine.length > 0) { //在文字串中减少文字,pop this.extraLine.pop() //设置数据 this.setData({ text: initText + 'n' + this.extraLine.join('n') }) } } })
二、icon展示,顯示系統自帶的樣式,同時可以修改圖示的大小
icon展示
icon大小樣式
icon類型
icon顏色樣式
JS互動操作:
//.js Page({ data: { iconSize: [20, 30, 40, 50, 60, 70], iconColor: [ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ], iconType: [ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'info_circle', 'cancel', 'search', 'clear' ] } })
三、progress展示,進度條的樣式設計
progress進度條展示
四、navigator導覽展示:分兩種形式,1.跳到新的介面,2 .當前介面跳轉
navigator展示
跳到新頁面
#更多微信小程式常用控制項text、icon、progress、button、navigator相關文章請關注PHP中文網!