鱼C论坛

 找回密码
 立即注册
查看: 1482|回复: 1

[庖丁解牛] 041 ∞ 基础:progress

[复制链接]
发表于 2018-6-19 10:50:42 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-6-19 10:50 编辑


                               
登录/注册后可看大图


上一讲我们搞定了富文本,本次来学习progress

progress,进度条。

常用属性:
属性名        类型        默认值        说明
percent        Float        无        百分比0~100
show-info        Boolean        false        在进度条右侧显示百分比
stroke-width        Number6        进度条线的宽度,单位px
color        Color        #09BB07        进度条颜色 (请使用 activeColor)
activeColor        Color                已选择的进度条的颜色
backgroundColor        Color                未选择的进度条的颜色
active        Boolean        false        进度条从左往右的动画
active-mode        String        backwards        backwards: 动画从头播;forwards:动画从上次结束点接着播 (基础库 1.7.0 开始支持,低版本需做兼容处理。)


index.wxml:
  1. <progress percent="30" show-info />
  2. <progress percent="40" stroke-width="12" />
  3. <progress percent="60" color="pink" />
  4. <progress percent="80" active />
复制代码

Snip20180619_171.png





课后作业


1、补充代码实现一条进度为30%并且在右侧显示百分比的进度条:
  1. <? percent="?"  ?/>
复制代码




答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢小程序,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-7-8 09:12:28 | 显示全部楼层
0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 22:37

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表