微信小程序组件解读和分析:六、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 通过ADB Wireless无线调试应用
使用数据线调试应用难免不方便,本篇博客介绍使用ADB Wireless工具.当手机和电脑处在同一网络下.实现无线调试应用. ADB Wireless可以让手机用无线来代替USB连接.而使用ADB工具的 ...
- Fluently NHibernate 插入CLOB字段
ORA-01461: can bind a LONG value only for insert into a LONG column 插入oracle某表时报的错. 查来查去,是插入的某个字段值超长 ...
- npm, webpack, vue-cli, vue-x, axios
1,什么是node.js,以及npm 简单的来说Node.js就是运行在服务端的JavaScript,是基于Chrome V8引擎的.npm是Node.js包的管理工具. 2,npm的安装和更新 No ...
- su: /bin/bash: Permission denied带来的疑惑
>客户一个oracle突然当机了,由于业务启动,客户下意识的重启了服务器,系统是起来了,准备切换到oracle用户下启动数据库,可以怎么都无法su切换,真是火上浇油呀,描述如下: 在root用户 ...
- 返回模式有流式(streaming)和整体(total) 热词词表解决方案
重要术语说明_语音识别(ASR)_智能语音交互-阿里云 https://help.aliyun.com/document_detail/72238.html 返回模式(response mode) ...
- IOS UI 设计 技术
AutoLayout AutoLayout是一种基于约束的,描述性的布局系统. 程序员—-(cgrect)—>frame(center+bounds) =====> 程序员—(N ...
- idea新建springmvc+spring+mybaties项目1
1,点击file,选择module,新建项目 2,选择maven -- >maven-archetype-webapp 3,输入GroupId,ArtifactId,点击next 4,选择本地m ...
- IJ:IJ来了
ylbtech-IJ:IJ来了 1.返回顶部 1. 2. 2.2. 3. 4. 2.返回顶部 1. 2. 3. 3. Welcome to IntelliJ IDEA返回顶部 1. 2.2. 2.2. ...
- FB 对话框接口
官方文档: https://developers.facebook.com/docs/dialogs FB的对话框主要是调用 FB.ui(); 方法. 有问题上官网看文档是最好的. 1. send D ...
- JSP指令--include指令(静态包含)
转自:https://blog.csdn.net/chentiefeng521/article/details/51802319 include指令 include指令是文件加载指令, ...