基础内容progress:官方文档

Demo Code:

Page({
data:{
percent:0
},
onReady:function(){
this.percentAdd();
},
percentAdd:function(e){
var that=this;
setInterval(function(){
var cur=that.data.percent;
cur++;
if(cur==101){
cur=0;
}
that.setData({
percent:cur
}); },100);
}
})

JS

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />
<progress percent="{{percent}}" />

WXML

progress{
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
}

WXSS

微信小程序组件progress的更多相关文章

  1. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  2. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  3. 微信小程序组件解读和分析:六、progress进度条

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

  4. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  5. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  6. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  7. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  8. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

  9. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

随机推荐

  1. nginx健康节点检查nginx_upstream_check_module 淘宝的upstream_check进行nginx后端检查 tengine

    Nginx实战系列之功能篇----后端节点健康检查 2015-01-18 22:35 5007人阅读 评论(0) 收藏 举报  分类: Nginx(28)    目录(?)[+]   公司前一段对业务 ...

  2. 简单解决Ubuntu修改locale的问题

      本文针对的问题是“Ubuntu 安装中文语言包”“Ubuntu Server中文问题”,“Ubuntu更改语言环境”,“Ubuntu locale的设定”,“cannot change local ...

  3. Matlab之显示输出

    0.recommand: fprintf fprintf('%d\n', i); 1.disp disp(['answer = '  num2str(5)]); 2.sprintf sprintf(' ...

  4. Sql server不同数据类型间拼接(+)

    )+'m' 输出 4m 若 +'m' 输出:在将 varchar 值 'm' 转换成数据类型 int 时失败.  

  5. Linux文件的打包与压缩

    打包命令: tar tar 的选项与参数非常的多!我们只讲几个常用的选项,更多选项您可以自行 man tar 查询罗! [root@www ~]# tar [-j|-z] [cv] [-f 创建的档名 ...

  6. java 遍历String

    Java字符串是一系列的Unicode字符序列,但是,它却常常被误认为是char序列.于是,我们经常这样来遍历字符串: package testchar; public class TestChar2 ...

  7. Django之前端模板继承

    在使用Django进行web开发时,往往会构造一个基础框架模板即base.html,而后在其子模板中对它所包含站点公用部分和定义块进行重载. 首先创建一个base.html,源码为: <!DOC ...

  8. Java Tomcat7性能监控与优化详解

    1.   目的 通过优化tomcat提高网站的并发能力. 2.   服务器资源 服务器所能提供CPU.内存.硬盘的性能对处理能力有决定性影响. 3.   优化配置 3.1. 配置tomcat管理员账户 ...

  9. flex组合流动布局实例---利用css的order属性改变盒子排列顺序

    flex弹性盒子 <div class="container"> <div class="box yellow"></div> ...

  10. 网络模型+三次握手+四次挥手+DNS+HTTPS

    网络模型+三次握手+四次挥手+DNS+HTTPS 这篇文章十分精华,所以整理一下: 一.网络模型 OSI七层模型,和TCP/IP五层模型(更为普遍) TCP/IP 协议集: 二.TCP协议(传输层)建 ...