微信小程式進度條/icon/新增和移除文字!
阿新 • • 發佈：2019-01-01
<view class="group">
<!--迴圈出不同的圖示-->
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45"/>
</block>
</view>
<!--迴圈出大小規格不同的圖示-->
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<!--新增一組不同顏色的小圖示-->
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="45" color="{{item}}"/>
</block>
</view>
<!--progress 進度條-->
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" show-info active />
<progress percent="60" color="pink" stroke-width="20" show-info/>
<progress percent="80" active />
<!--text 文字的新增與移除-->
<view class="btn-area">
<view class="body-view">
<text>{{text}}</text>
<icon type="success" size="20" color="{{item}}"/>
<button bindtap="add">add line</button>
<button bindtap="remove">remove line</button>
</view>
<!--迴圈出不同的圖示-->
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45"/>
</block>
</view>
<!--迴圈出大小規格不同的圖示-->
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<!--新增一組不同顏色的小圖示-->
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="45" color="{{item}}"/>
</block>
</view>
<!--progress 進度條-->
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" show-info active />
<progress percent="60" color="pink" stroke-width="20" show-info/>
<progress percent="80" active />
<!--text 文字的新增與移除-->
<view class="btn-area">
<view class="body-view">
<text>{{text}}</text>
<icon type="success" size="20" color="{{item}}"/>
<button bindtap="add">add line</button>
<button bindtap="remove">remove line</button>
</view>