小程序学习02->icon图标与progress进度条
程序员文章站
2024-02-16 20:52:34
...
一、icon
icon为显示图标的组件,其属性如下所示:
.wxml文件
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"></icon>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45"></icon>
</block>
</view>
<view>
<block wx:for="{{iconColor}}">
<icon type="success" size="60" color="{{item}}"></icon>
</block>
</view>
.js文件
Page({
data:{
iconSize:[20,30,40,50,60,70],
iconColor:[
'red','orange','yellow','green','rgb(0,255,255)','blue',
'purple'
],
iconType:[
'success','success_no_circle','info','warn','waiting',
'search','cancel'
],
},
效果图:
二、progress
progress属性如下图所示:
.wxml文件
<progress percent="40" show-info="true"/>
<progress percent="30" stroke-width="100"/>
<progress percent="50" color="#ff0000"/>
<progress percent="70" active/>
效果图: