progress进度条组件说明:

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

progress进度条组件示例代码运行效果如下:

下面是WXML代码:

[XML] 纯文本查看 复制代码
1
2
3
4
5
<!--index.wxml-->
<view class="content">
    <text class="con-text">问:老司机,啥时候开车?</text>
    <progress class="con-pro" percent="97" show-info/>
</view>

下面是JS代码:

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码:

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 20px;
}
.con-pro{
  color: cornflowerblue;
}

下面是WXML代码:

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<!--index.wxml-->
<view class="content">
    <text class="con-text">不展示百分比</text>
    <progress class="con-pro" percent="77"/>
    <text class="con-text">展示百分比(百分比字体样式通过class控制)</text>
    <progress class="con-pro" percent="97" show-info/>
    <text class="con-text">改变进度条线的宽度:15px</text>
    <progress class="con-pro" percent="47" stroke-width="15"/>
    <text class="con-text">改变进度条颜色(#):黑色</text>
    <progress class="con-pro" percent="67" color="#000000"/>
    <text class="con-text">改变进度条颜色(已定义):橘色</text>
    <progress class="con-pro" percent="67" color="orange"/>
    <text class="con-text">几个属性叠加</text>
    <progress class="con-pro" percent="87" color="lightgreen" show-info stroke-width="30"/>
</view>

下面是JS代码:

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码:

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

下面是WXML代码:

[XML] 纯文本查看 复制代码
1
2
3
4
5
<!--index.wxml-->
<view class="content">
    <text class="con-text">看我开的飞起</text>
    <progress class="con-pro" active percent="87" color="lightgreen" show-info stroke-width="20"/>
</view>

下面是JS代码:

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码:

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

progress进度条的主要属性:

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

点击查看原文

微信小程序组件解读和分析:六、progress进度条的更多相关文章

  1. 微信小程序组件解读和分析:五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  2. 微信小程序组件解读和分析:四、icon图标

      icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...

  3. 微信小程序组件解读和分析:十四、slider滑动选择器

    slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...

  4. 微信小程序组件解读和分析:十、input输入框

    input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...

  5. 微信小程序组件解读和分析:八、checkbox复选项

    checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...

  6. 微信小程序组件解读和分析:一、view(视图容器 )

    view组件说明:    视图容器    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...

  7. 微信小程序组件解读和分析:十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  8. 微信小程序组件解读和分析:十三、radio单选项目

    radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...

  9. 微信小程序组件解读和分析:十二、picker滚动选择器

    picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...

随机推荐

  1. iOS7获取UUID以及转换MD5

    近期项目开发,运用到要获取UUID转MD5,可是iOS7不能使用获取的UDID的接口(涉及到隐私),获取MAC地址的方式的接口在iOS7下也废弃了.眼下可能的就是获取UUID了,可是在iOS7下,UU ...

  2. easyUI的tree

    前端使用easyUI,放了一个tree,搞死了. easyUI的tree,后端传过来的数据,是json格式:然后easyUI向后端提交.请求时,会自动将节点的id附在url后面. 主要有两个注意的地方 ...

  3. apache httpd 2.4 httpd

    This is a wiki containing user-contributed recipes, tips, and tricks for the Apache HTTP Server (aka ...

  4. Apache Hadoop 3.0.0 Release Notes

    http://hadoop.apache.org/docs/r3.0.0/hadoop-project-dist/hadoop-common/release/3.0.0/RELEASENOTES.3. ...

  5. a simple and universal interface between web servers and web applications or frameworks: the Python Web Server Gateway Interface (WSGI).

    WSGI is the Web Server Gateway Interface. It is a specification that describes how a web server comm ...

  6. YTU 2904: B--Faultfinding

    2904: B--Faultfinding 时间限制: 1 Sec  内存限制: 128 MB 提交: 64  解决: 33 题目描述 Do you remember the game in whic ...

  7. java抛出异常后,后续代码是否可继续执行

    参考:https://www.cnblogs.com/wangyingli/p/5912269.html 仅此可正常执行异常后内容 try{ throw new Exception("参数越 ...

  8. iphone设备尺寸规格

    1.以下是iphone各种设备的尺寸规格 2.开发时只需要按“逻辑分辨率”来,1x,2x,3x主要用于切图时按不同大小来切图,如1x的图就是按照“逻辑分辨率”大小的效果图切出来的原图,2x就是1x原图 ...

  9. plink 与 ssh 远程登录问题

    plink 是一种 putty-tools,ubuntu 环境下,如果没有安装 plink,可通过如下方法进行安装: $ echo y | sudo apt-get install plink 1. ...

  10. 输出两个MAC地址之间的地址

    /******************************************************************************* * 输出两个MAC地址之间的地址 * ...