效果圖片：

 index.wmxl檔案

 <block wx:for="{{pres}}">
      <view class='foot_tab' data-id="{{index}}" style="{{index==id? 'color:rgb(91, 207, 97)':'color:#ddd'}}" bindtap='changeColor'>
        <view class="icon">
          <icon class="iconfont {{item.img_type}}"></icon>
        </view>
        <view>{{item.text}}</view>
      </view>
 </block>
 

 index.js檔案

var id;
Page({
  data: {
   pres: [{ img_type: 'icon-baomihua', text: '電影' }, { img_type:"icon-yonghu",text:'我的'}],
    id:0
  },changeColor: function(e){
   var id=e.currentTarget.dataset.id;
    this.setData({
      id:id,
    });    
  }
})

 index.wxss檔案

.footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-top: 1px solid rgb(226, 226, 226);
}

.foot_tab {
  width: 40px;
  height: 50px;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.icon {
  width: 30px;
  height: 30px;
  /* background-color: #ccc; */
  text-align: center;
}
 

app.wxss

@font-face {
  font-family: 'iconfont';  /* project id 794639 */
  src: url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.eot');
  src: url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.woff') format('woff'),
  url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.svg#iconfont') format('svg');
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:60rpx;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-baomihua:before{content: '\e622';}
.icon-yonghu:before{content: '\e600';}