打分效果聯動

前幾天妹子問我一個需求，就跟上面差很少了。感受vue和小程序這種擁有數據綁定特性的框架來處理這種事情仍是比較容易的。

下面是代碼

wxss

.items{
  width: 100%;
  display: flex
}

.item{
  text-align: center;
  margin: 10rpx;
  box-sizing: border-box;
}

.it_selectd{
  background-color:black;
  color: white;
  border-color:white;
}
.stars{
  width: 750rpx;
  display: flex
}
.star{
  width: 100rpx;
  height: 100rpx;
  border: 1px solid black;
  border-radius: 50rpx;
  margin: 10rpx;
}

wxml

<view class="items">
  <view class="item {{item.isSelect?'it_selectd':''}}" wx:for="{{items}}" data-index="{{index}}" bindtap='czc'>{{item.txt}}</view>
</view>

<view class="stars">
  <view class="star {{item.isSelect?'it_selectd':''}}"  data-index="{{4-index}}" wx:for="{{stars}}" bindtap='czc'></view>
</view>

js

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    stage: 1,//默認狀況下的選中等級，分爲1-5
    items: [
      { txt: "超級好", isSelect: false },
      { txt: "很是好", isSelect: false },
      { txt: "好", isSelect: false },
      { txt: "很差", isSelect: false },
      { txt: "垃圾", isSelect: false }
    ],
    stars: [
      { isSelect: false },
      { isSelect: false },
      { isSelect: false },
      { isSelect: false },
      { isSelect: false }
    ]
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.reloadStage();
  },
  czc: function (e) {
    var stage = e.currentTarget.dataset.index;
    this.reloadStage(stage + 1);
  },
  reloadStage: function (stage) {
    var items = this.data.items;
    var stars = this.data.stars;
    var stage = stage || 1;
    for (var i = 0; i < items.length; i++) {
      items[i].isSelect = false;
      stars[i].isSelect = false;
      if (i+1 == stage) {
        items[i].isSelect = true;
      }
      if (i - 1 < 5 - stage) {
        stars[i].isSelect = true;
      }
    }
    this.setData({
      items: items,
      stars: stars,
      stage: stage
    })
  }
})