微信小程序组件解读和分析：六、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 |
点击查看原文
转载于:https://www.cnblogs.com/johnchai/p/6637433.html
微信小程序组件解读和分析：六、progress进度条相关推荐
- 微信小程序下载视频到相册（带进度条）
微信小程序下载视频到相册,并带进度条 <button class="desc-note my-button u-font-32" @click="toUpload( ...
- 【微信小程序】简易音乐播放器，进度条拖拉、音乐的播放与暂停
小程序简易音乐播放器实现 粗糙的页面设计: wxml部分: <view class="test"><view class="img">& ...
- 微信小程序把玩（二十六）navigator组件
微信小程序把玩(二十六)navigator组件 原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
- 微信小程序和PWA对比分析
微信小程序和PWA对比分析 微信小程序和PWA(Progressive Web App)是目前移动端以及前端受关注度较高的两项技术.小程序自去年公测以来,国内很多公司均投入到小程序的开发中,今日头条. ...
- android img标签属性_微信小程序 组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
- 微信小程序组件间通信（二）
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作 注:子组件向父组件中传递通过事件传递操作 通过事件参数对象det ...
- 微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件 组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件 组件是视图层的基本组成单元. 组件自带一 ...
- 【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件 微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念 什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...
- 微信小程序 - 组件化开发
微信小程序 -- 组件化开发,总结一下开发思路及过程: 组件,类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成. 1.首先,在 miniprogram 文件夹下,创建一个 ...
最新文章
- CentOS7 设置主机名及IP映射
- 14门教程带你全面入门Linux
- oracle ctl file constantnull,Oracle 的一些导入和导出方法
- python实现雪花飘落效果_jQuery实现雪花飘落效果
- java面试没有全部答对_十道java基础面试题，你能保证全答对吗？
- 分布式锁的几种实现方式~
- 如何使用Java逐行读取大文本文件？
- Android_adb shell am/pm使用
- 腾讯云TStack与IBM LinuxONE互认证
- 【备忘】Java菜鸟到大牛学习路线之实战篇
- java httpclient重定向_HTTPClient重定向
- 多目标优化 MOP （二）：遗传算法 SPEA2 2001
- 十款开发者常用的Chrome插件,让chrome成为开发利器！
- linux服务器拷机测试,服务器拷机使用方法
- 数字存储示波器基本工作原理与使用方法
- 公众号 自动生成海报 python_Python 生成公众号头图 1.0
- 黑科技：智慧医院刷脸支付，挂号就医无需等待
- A星融合DWA的路径规划算法，可实现静态避障碍及动态避障,代码注释详细,matlab源码
- hive数据备份与恢复
- 爱玩吧提供10G国外免费PHP空间