微信小程序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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
javascript代码加载优化方法
Jan 30 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
javascript history对象详解
Feb 09 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python实现图书借阅系统
2019/02/20 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
pandas中ix的使用详细讲解
2020/03/09 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
经典c++面试题二
2015/08/14 面试题
自动化专业职业生涯规划书范文
2014/01/16 职场文书
销售个人求职信范文
2014/04/28 职场文书
我的祖国演讲稿
2014/05/04 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB