微信小程序progress组件使用详解


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序progress组件的使用方法,供大家参考,具体内容如下

效果图

微信小程序progress组件使用详解

WXML

<view class="tui-content">
 <view class="tui-menu-list">
  <text>show-info在进度条右侧显示百分比</text>
  <progress percent="50" show-info />
 </view>
 <view class="tui-menu-list">
  <text>stroke-width进度条线的宽度,单位px</text>
  <progress percent="50" stroke-width="12" show-info/>
 </view>
 <view class="tui-menu-list">
  <text>color进度条颜色</text>
  <progress percent="50" color="red" show-info/>
 </view>
 <view class="tui-menu-list">
  <text>active进度条从左往右的动画</text>
  <progress percent="50" active show-info/>
 </view>
 <view class="tui-menu-list">
  <text>backgroundColor未选择的进度条的颜色</text>
  <progress percent="50" backgroundColor="blue" active show-info/>
 </view>
 <view class="tui-menu-list">
  <text>动态设置进度条进度</text>
  <progress percent="{{index}}" show-info/>
 </view>
 <view class="tui-tabbar-content">
  <view class="tui-tabbar-group">
   <text data-id="10" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 10 ? 'tui-active' : ''}}">10%</text>
   <text data-id="30" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 30 ? 'tui-active' : ''}}">30%</text>
   <text data-id="50" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 50 ? 'tui-active' : ''}}">50%</text>
   <text data-id="70" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 70 ? 'tui-active' : ''}}">70%</text>
   <text data-id="90" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 90 ? 'tui-active' : ''}}">90%</text>
  </view>
 </view>
</view>

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:动画从上次结束点接着播

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
ES6对象操作实例详解
May 23 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
微信小程序button组件使用详解
Jan 31 #Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 #Javascript
微信小程序模板(template)使用详解
Jan 31 #Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 #Javascript
js保留两位小数方法总结
Jan 31 #Javascript
微信小程序icon组件使用详解
Jan 31 #Javascript
详解Chai.js断言库API中文文档
Jan 31 #Javascript
You might like
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
Python格式化css文件的方法
2015/03/10 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
带你认识Django
2019/01/15 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
外贸英语专业求职信范文
2013/12/25 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
高中生物教学反思
2014/02/05 职场文书
座谈会主持词
2014/03/20 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
党性分析材料格式
2014/12/19 职场文书
归元寺导游词
2015/02/06 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers