微信小程序学习（六）之progress组件

最新推荐文章于 2024-06-21 11:55:31 发布

海阳之新

最新推荐文章于 2024-06-21 11:55:31 发布

阅读量713

点赞数

分类专栏：微信小程序文章标签： progress组件

本文链接：https://blog.csdn.net/vsiryxm/article/details/53417567

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、效果

二、代码

<!--学习progress组件-->
<view class="title">学习progress组件</view>
<view class="student">2016/12/01 vsiryxm@qq.com</view>
<view>
    <text>
    1、show-info属性用来定义在右侧是否显示百分比数字，支持小数点。
    2、stroke-width属性用来定义进度条线条宽度。
    3、color属性用来定义进度条的前景色的颜色。
    4、active属性用来定义进度条的动画效果（从左往右）。
    \n</text>
</view>
<view>显示百分比的效果（show-info属性）：</view>
<view><progress percent="20" show-info="true" /></view>
<view>定义进度条线条宽度的效果（stroke-width属性）：</view>
<view><progress percent="20" stroke-width="12" /></view>
<view>定义进度条前景颜色的效果（color属性）：</view>
<view><progress percent="20" color="pink" /></view>
<view>让进度条动起来的效果（active属性）：</view>
<view><progress percent="80" active="true" /></view>