微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明:
进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行。
progress进度条是微信小程序的组件,和HTML5的进度条progress类似。
progress进度条组件示例代码运行效果如下:
下面是WXML代码:
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代码:
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代码:
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代码:
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代码:
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代码:
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代码:
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代码:
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代码:
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进度条的更多相关文章
- 微信小程序组件解读和分析:五、text文本
text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...
- 微信小程序组件解读和分析:四、icon图标
icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...
- 微信小程序组件解读和分析:十四、slider滑动选择器
slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...
- 微信小程序组件解读和分析:十、input输入框
input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...
- 微信小程序组件解读和分析:八、checkbox复选项
checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...
- 微信小程序组件解读和分析:一、view(视图容器 )
view组件说明: 视图容器 跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...
- 微信小程序组件解读和分析:十五、switch 开关选择器
switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...
- 微信小程序组件解读和分析:十三、radio单选项目
radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...
- 微信小程序组件解读和分析:十二、picker滚动选择器
picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...
随机推荐
- Android之弹出多级菜单
使用布局文件创建菜单:(多级菜单) 在res下创建目录menu(假设已经有啦就不用再创建了) 在该menu目录下创建XML文件这里我把文件名称命名为menu 在创建的menu.XML文件里 写入: & ...
- npm, webpack, vue-cli, vue-x, axios
1,什么是node.js,以及npm 简单的来说Node.js就是运行在服务端的JavaScript,是基于Chrome V8引擎的.npm是Node.js包的管理工具. 2,npm的安装和更新 No ...
- java8--IO工具类(java疯狂讲义3复习笔记)
Paths类 public static void pathTest(){ Path path = Paths.get("~"); System.out.println(path) ...
- java的Date日期使用
import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...
- 《CMake实践》笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE【转】
本文转载自:http://www.cnblogs.com/52php/p/5681745.html 前言: 开发了5,6年的时间,如果没有KDE4,也许不会有人或者Linux发行版本重视cmake,因 ...
- SERVLET类常用接口及方法
SERVLET类常用接口及方法 2011-09-09 16:14:43 [size=xx-small]SERVLET类常用接口及方法2007年04月05日 星期四 04:46 P.M.基本类和接 ...
- manacher求最长回文子串算法
原文:http://www.felix021.com/blog/read.php?2040 首先用一个非常巧妙的方式,将所有可能的奇数/偶数长度的回文子串都转换成了奇数长度:在每个字符的两边都插入一个 ...
- CF 949 D Curfew —— 二分答案
题目:http://codeforces.com/contest/949/problem/D 先二分一个答案,让两边都至少满足这个答案: 由于越靠中间的房间越容易满足(被检查的时间靠后),所以策略就是 ...
- bzoj1878 [SDOI2009]HH的项链——树状数组
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1878 离线树状数组,巧妙的思路呢: 给每种项链记录一个最后出现的位置lst,根据项链最后出现 ...
- zoj 3861(dfs)
Valid Pattern Lock Time Limit: 2 Seconds Memory Limit: 65536 KB Pattern lock security is genera ...