找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

首页 › 教程频道› 小程序开发 › 查看内容

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

作者：模板之家 2018-1-25 16:37 1114人关注

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

组件说明:

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

组件用法：

 


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. }

 


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. }

 

 


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


路过
雷人
握手
鲜花
鸡蛋
原作者: 模板之家 来自: 网络收集
上一篇：小程序极速实战开发《五》text文本
下一篇：小程序极速实战开发《七》button按钮

全部回复(0)

Copyright © Comsenz Inc. Powered by Discuz!X3.5 蜀ICP备12013697号
微信：xu08290201 QQ：75283535