微信小程序常用控件text、icon、progress、button、navigator

//初始化一个文字参数
var initText = &＃39;这是第一个文字n这是第二个文字&＃39;
Page({
data: {
text: initText
},
//初始化一个空的文字串
extraLine: [],
//添加按钮点击事件
add: function(e) {
//在文字串中添加文字，push
this.extraLine.push(&＃39;添加的其他文字&＃39;)
//设置数据
this.setData({
text: initText + &＃39;n&＃39; + this.extraLine.join(&＃39;n&＃39;)
})
},
//减少按钮点击事件
remove: function(e) {
//判断文字串是否大于0，如果大于0，减少，反之，不操作
if (this.extraLine.length > 0) {
//在文字串中减少文字，pop
this.extraLine.pop()
//设置数据
this.setData({
text: initText + &＃39;n&＃39; + this.extraLine.join(&＃39;n&＃39;)
})
}
}
})

二、icon展示，显示系统自带的样式，同时可以修改图标的大小
icon展示
icon大小样式
icon类型
icon颜色样式

JS交互操作：

//.js
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
&＃39;red&＃39;, &＃39;orange&＃39;, &＃39;yellow&＃39;, &＃39;green&＃39;, &＃39;rgb(0,255,255)&＃39;, &＃39;blue&＃39;, &＃39;purple&＃39;
],
iconType: [
&＃39;success&＃39;, &＃39;info&＃39;, &＃39;warn&＃39;, &＃39;waiting&＃39;, &＃39;safe_success&＃39;, &＃39;safe_warn&＃39;,
&＃39;success_circle&＃39;, &＃39;success_no_circle&＃39;, &＃39;waiting_circle&＃39;, &＃39;circle&＃39;, &＃39;download&＃39;,
&＃39;info_circle&＃39;, &＃39;cancel&＃39;, &＃39;search&＃39;, &＃39;clear&＃39;
]
}
})

三、progress展示，进度条的样式设计
progress进度条展示


四、navigator导航展示：分两种形式，1.跳转到新的界面，2.当前界面跳转
navigator展示

跳转到新页面

更多微信小程序常用控件text、icon、progress、button、navigator相关文章请关注PHP中文网！