微信小程序-progress组件

进度条
主要属性:


效果图:

progress.wxml添加代码:

<View >
    <!--百分比是30,并在进度条右侧显示百分比-->
    <Text class="text-style">百分比是30,并在进度条右侧显示百分比</Text>
    <progress percent="30" show-info  />
    <!--百分比是40,进度条线的宽度12px-->
    <Text class="text-style">百分比是40,进度条线的宽度12px</Text>
    <progress percent="40" stroke-width="12" />
    <!--百分比是60,进度条颜色:pink-->
    <Text class="text-style">百分比是60,进度条颜色:pink</Text>
    <progress percent="60" color="pink" />
    <!--百分比是80,进度条从左往右的动画-->
    <Text class="text-style">百分比是80,进度条从左往右的动画</Text>
    <progress percent="80" show-info  active />
</View>

progress.wxss添加代码:

.text-style{
    font-size: 13px;
}

来源:
http://bbs.520it.com/forum.php?mod=viewthread&tid=2568&extra=page%3D1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容