微信小程序新手教程组件学习入门( 二 )


})
},
intervalChange:function(e){
this.setData({
interval:e.detail.value
})
},
durationChange:function(e){
this.setData({
duration:e.detail.value
})
}
})
效果图:

微信小程序新手教程组件学习入门

文章插图
二:基础内容
包括
icon 图标
text 文本
progress 进度条
icon:属性只有三个
type类型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear(跟bootstrap似的,不同类型显示的样式不同)
size 大小,单位是px
color 颜色
大小和颜色就不说了,我试试不同类型的显示样式
代码:
.wxml
.js
Page({
data:{
iconType:[
'success','success_no_circle','info','warn','waiting','cancel','download','search','clear'
]
}
})
效果图:
微信小程序新手教程组件学习入门

文章插图
text文本用法简单文本内容
而且是行内元素,不独占一行
progress进度条
属性
percent 百分比0~100
show-info 在进度条右侧显示百分比
stroke-width 进度条的宽度,单位px
color 进度条颜色
active 进度条从左往右的动画(用这个的时候进度条自动从左往右动画到设定好的百分比数)
代码:
效果图:
微信小程序新手教程组件学习入门

文章插图

推荐阅读