微信小程序中progress组件的使用示例

小编给大家分享一下微信小程序中progress组件的使用示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

华蓥网站建设公司创新互联建站,华蓥网站设计制作,有大型网站制作公司丰富经验。已为华蓥上千多家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的华蓥做网站的公司定做!

微信小程序progress组件的使用方法,具体内容如下

效果图

微信小程序中progress组件的使用示例

WXML


 
  show-info在进度条右侧显示百分比
  
 
 
  stroke-width进度条线的宽度,单位px
  
 
 
  color进度条颜色
  
 
 
  active进度条从左往右的动画
  
 
 
  backgroundColor未选择的进度条的颜色
  
 
 
  动态设置进度条进度
  
 
 
  
   10%
   30%
   50%
   70%
   90%
  
 

JS

Page({
 data: {
  index: 10
 },
 changeTabbar(e){
  this.setData({ index: e.currentTarget.dataset.id})
 }
})

progress属性

percent:初始化所占百分比
show-info:进度条右侧是否显示进度条百分比
stroke-width:进度条宽度,单位px,默认为6
color:进度条颜色
activeColor:已选择的进度条的颜色
backgroundColor:未选择的进度条的颜色
active:进度条从左往右的动画
active-mode:backwards: 动画从头播;forwards:动画从上次结束点接着播

以上是“微信小程序中progress组件的使用示例”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文题目:微信小程序中progress组件的使用示例
转载源于:http://bzwzjz.com/article/pdscoi.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站制作公司 成都网站建设 四川成都网站制作 成都商城网站制作 定制级高端网站建设 温江网站设计 教育网站设计方案 成都网站制作 成都商城网站建设 网站设计 高端网站设计 手机网站制作设计 企业网站设计 成都网站制作 外贸网站设计方案 定制网站建设多少钱 成都网站设计 网站制作公司 成都网站制作 成都企业网站设计 移动手机网站制作 响应式网站设计