微信小程序进度条/icon/添加和移除文字!

<!--index.wxml-->

<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>

</view>

//js 

var initData = 'this is first line\nthis is second line'

var extraLine = [];

Page({

  data: {

    iconSize: [20, 30, 40, 50, 60, 70],

    iconColor: [

      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'

    ],

    iconType: [

      'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',

      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',

      'info_circle', 'cancel', 'search', 'clear'

    ],

    text: initData,

  },

   add: function(e) {

    extraLine.push('添加成功')

    this.setData({

      text: initData + '\n' + extraLine.join('\n')

    })

  },

  remove: function(e) {

    if (extraLine.length > 0) {

      extraLine.pop()

      this.setData({

        text: initData + '\n' + extraLine.join('\n')

      })

    }

  }

})

样式部分

/**index.wxss**/

.group{

margin:20rpx;

}

progress{

  padding: 20rpx;

}

.btn-area{

  padding-top:100rpx; 

}