小程序打分模块

参考连接
1.双向绑定
https://blog.csdn.net/lizhen_software/article/details/81632229
2.打分
https://blog.csdn.net/qq_35713752/article/details/78770260
我自己修改后的源码

修改思路

使用[]调用json进行拼接，达到复用效果

wxml

<!-- 打分 -->
  <!-- 描述相符 -->
  <view>
    <block>
      <text>描述相符</text>
    </block>
    <block wx:for="{{one_1}}" wx:key="index"> 
      <icon class='iconfont icon-xingxing_o' catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' data-key="{{1}}"/>  
    </block>
    <block wx:for="{{two_1}}" wx:key="index">
      <icon class='iconfont icon-xingxing' catchtap='in_xin' id='{{index+1}}' data-in='use_sc' data-key="{{1}}"/>  
    </block> 
  </view>
  <!-- 物流服务 -->
  <view>
    <block>
      <text>物流服务</text>
    </block>
    <block wx:for="{{one_2}}" wx:key="index"> 
      <icon class='iconfont icon-xingxing_o' catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' data-key="{{2}}"/>  
    </block>
    <block wx:for="{{two_2}}" wx:key="index">
      <icon class='iconfont icon-xingxing' catchtap='in_xin' id='{{index+1}}' data-in='use_sc' data-key="{{2}}"/>  
    </block> 
  </view>
    <!-- 服务态度 -->
  <view>
    <block>
      <text>服务态度</text>
    </block>
    <block wx:for="{{one_3}}" wx:key="index"> 
      <icon class='iconfont icon-xingxing_o' catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' data-key="{{3}}"/>  
    </block>
    <block wx:for="{{two_3}}" wx:key="index">
      <icon class='iconfont icon-xingxing' catchtap='in_xin' id='{{index+1}}' data-in='use_sc' data-key="{{3}}"/>  
    </block> 
  </view>

js

//用户给评分模块
  in_xin: function (e) { 
    let in_xin = e.currentTarget.dataset.in;
    let key=e.currentTarget.dataset.key;
    let nameMap = {} 
    let one;
    if (in_xin === 'use_sc2') {
      one = Number(e.currentTarget.id);
    } else {
      one = Number(e.currentTarget.id) + this.data["one_"+key];
    }
    nameMap["one_" + key] = one
    nameMap["two_" + key] = 5 - one
    this.setData(nameMap)
  }

wxss

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}
.iconfont {
  margin-top: -12rpx;
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 每点击的星星 */
.icon-xingxing:before { 
  margin-left: 15rpx;
  font-size:26px;
  color: #CCCCCC;
  content: "\e60b";
}
/* 点击后的星星 */
.icon-xingxing_o:before { 
  margin-left: 15rpx;
  font-size:26px;
  color: #FE6054;
  content: "\e60b";
}