欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《六》progress进度条

发布：2018-01-25 16:38浏览： 次来源：网络 作者：tianshu

组件说明:

进度条，就是表示事情当前完成到什么地步了，可以让用户视觉上感知事情的执行。
progress进度条是微信小程序的组件，和HTML5的进度条progress类似。

组件用法：

小程序极速实战开发《六》progress进度条(图1)

 


wxml


  1. <!--index.wxml-->
  2. <view class="content">
  3.     <text class="con-text">问：老司机，啥时候开车？</text>
  4.     <progress class="con-pro" percent="97" show-info/>
  5. </view>

js


  1. Page({
  2.   data:{  
  3.   },
  4.   onLoad:function(options){
  5.     // 页面初始化 options为页面跳转所带来的参数
  6.   },
  7.   onReady:function(){
  8.     // 页面渲染完成
  9.   },
  10.   onShow:function(){
  11.     // 页面显示
  12.   },
  13.   onHide:function(){
  14.     // 页面隐藏
  15.   },
  16.   onUnload:function(){
  17.     // 页面关闭
  18.   }
  19. })

wxss


  1. .content{
  2.   padding-top: 20px;
  3. }
  4. .con-text{
  5.   display: block;
  6.   padding-bottom: 20px;
  7. }
  8. .con-pro{
  9.   color: cornflowerblue;
  10. }

小程序极速实战开发《六》progress进度条(图2)

 


wxml


  1. <!--index.wxml-->
  2. <view class="content">
  3.     <text class="con-text">不展示百分比</text>
  4.     <progress class="con-pro" percent="77"/>
  5.     <text class="con-text">展示百分比(百分比字体样式通过class控制)</text>
  6.     <progress class="con-pro" percent="97" show-info/>
  7.     <text class="con-text">改变进度条线的宽度:15px</text>
  8.     <progress class="con-pro" percent="47" stroke-width="15"/>
  9.     <text class="con-text">改变进度条颜色(#)：黑色</text>
  10.     <progress class="con-pro" percent="67" color="#000000"/>
  11.     <text class="con-text">改变进度条颜色(已定义)：橘色</text>
  12.     <progress class="con-pro" percent="67" color="orange"/>
  13.     <text class="con-text">几个属性叠加</text>
  14.     <progress class="con-pro" percent="87" color="lightgreen" show-info stroke-width="30"/>
  15. </view>

js


  1. Page({
  2.   data:{  
  3.   },
  4.   onLoad:function(options){
  5.     // 页面初始化 options为页面跳转所带来的参数
  6.   },
  7.   onReady:function(){
  8.     // 页面渲染完成
  9.   },
  10.   onShow:function(){
  11.     // 页面显示
  12.   },
  13.   onHide:function(){
  14.     // 页面隐藏
  15.   },
  16.   onUnload:function(){
  17.     // 页面关闭
  18.   }
  19. })

wxss


  1. .content{
  2.   padding-top: 20px;
  3. }
  4. .con-text{
  5.   display: block;
  6.   padding-bottom: 10px;
  7. }
  8. .con-pro{
  9.   padding-bottom: 30px;
  10.   color: cornflowerblue;
  11. }

 

小程序极速实战开发《六》progress进度条(图3)

 


wxml


  1. <!--index.wxml-->
  2. <view class="content">
  3.     <text class="con-text">看我开的飞起</text>
  4.     <progress class="con-pro" active percent="87" color="lightgreen" show-info stroke-width="20"/>
  5. </view>

js


  1. Page({
  2.   data:{  
  3.   },
  4.   onLoad:function(options){
  5.     // 页面初始化 options为页面跳转所带来的参数
  6.   },
  7.   onReady:function(){
  8.     // 页面渲染完成
  9.   },
  10.   onShow:function(){
  11.     // 页面显示
  12.   },
  13.   onHide:function(){
  14.     // 页面隐藏
  15.   },
  16.   onUnload:function(){
  17.     // 页面关闭
  18.   }
  19. })

wxss


  1. .content{
  2.   padding-top: 20px;
  3. }
  4. .con-text{
  5.   display: block;
  6.   padding-bottom: 10px;
  7. }
  8. .con-pro{
  9.   padding-bottom: 30px;
  10.   color: cornflowerblue;
  11. }

主要属性：[td]
属性
类型
默认值
描述
percent float 0 表示0-100百分比
show-info Boolean false 表示在进度条右侧显示百分比，写上属性即为true
color Color #09BB07 表示进度条颜色，可以是#或者已定义颜色属性
stroke-width Number 6 单位：px，表示进度条显示的线条宽度
active Boolean false 表示进度条从左往右的动画，动画到设置的百分比停止，写上属性即为true





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有