打分效果联动

前几天妹子问我一个需求，就跟上面差很少了。感受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
    })
  }
})