首頁  >  文章  >  微信小程式  >  微信小程式常用控制項text、icon、progress、button、navigator

微信小程式常用控制項text、icon、progress、button、navigator

高洛峰
高洛峰原創
2017-03-30 17:38:303055瀏覽

首先延續先前的首頁介面展示,幾個跳轉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中文網!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn