微信小程序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函数ajax
Aug 20 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
vue使用screenfull插件实现全屏功能
Sep 17 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
正规的求职信范文分享
2013/12/11 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
新学期开学寄语2016
2015/12/04 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
Python实现仓库管理系统
2022/05/30 Python