本文为大家分享了微信小程序进展组件的使用方法,供大家参考,具体内容如下
效果图
WXML
& lt;视图类=皌ui-content”比;
& lt;视图类=皌ui-menu-list”比;
& lt; text>显示信息在进度条右侧显示百分比& lt;/text>
& lt;进度百分比=" 50 "显示信息/比;
& lt;/view>
& lt;视图类=皌ui-menu-list”比;
& lt; text>笔划宽度进度条线的宽度,单位px
& lt;进度百分比=" 50 "笔划宽度=?2”显示信息/比;
& lt;/view>
& lt;视图类=皌ui-menu-list”比;
& lt; text>颜色进度条颜色& lt;/text>
& lt;进度百分比=?0”=昂臁毕允拘畔?颜色比;
& lt;/view>
& lt;视图类=皌ui-menu-list”比;
& lt; text>积极进度条从左往右的动画& lt;/text>
& lt;进度百分比=" 50 "活动显示信息/比;
& lt;/view>
& lt;视图类=皌ui-menu-list”比;
& lt; text>写成backgroundColor未选择的进度条的颜色& lt;/text>
& lt;进度百分比=" 50 "写成backgroundColor=袄渡被疃允拘畔?比;
& lt;/view>
& lt;视图类=皌ui-menu-list”比;
& lt; text>动态设置进度条进度& lt;/text>
& lt;进度百分比="{{指数}}”显示信息/比;
& lt;/view>
& lt;视图类=皌ui-tabbar-content”比;
& lt;视图类=皌ui-tabbar-group”比;
& lt;文本数据id=" 10 " bindtap=癱hangeTabbar”class=" tui-tabbar-cell{{指数==10 & # 63;“tui-active”:“}}”在10% & lt;/text>
& lt;文本数据id=" 30 " bindtap=癱hangeTabbar”class=" tui-tabbar-cell{{指数==30 & # 63;“tui-active”:“}}”在30% & lt;/text>
& lt;文本数据id=" 50 " bindtap=癱hangeTabbar”class=" tui-tabbar-cell{{指数==50 & # 63;“tui-active”:“}}”在50% & lt;/text>
& lt;文本数据id=" 70 " bindtap=癱hangeTabbar”class=" tui-tabbar-cell{{指数==70 & # 63;“tui-active”:“}}”在70% & lt;/text>
& lt;文本数据id=" 90 " bindtap=癱hangeTabbar”class=" tui-tabbar-cell{{指数==90 & # 63;“tui-active”:“}}”在90% & lt;/text>
& lt;/view>
& lt;/view>
& lt;/view>
之前
JS
页面({
数据:{
指数:10
},
changeTabbar (e) {
这一点。setData({指数:e.currentTarget.dataset.id})
}
})
之前
<强>进步属性
百分比:初始化所占百分比
显示信息:进度条右侧是否显示进度条百分比
笔划宽度:进度条宽度,单位px,默认为6
颜色:进度条颜色
activeColor:已选择的进度条的颜色
写成backgroundColor:未选择的进度条的颜色
活动:进度条从左往右的动画
主动模式:向后动画从头播;转发:动画从上次结束点接着播
演示下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
