参考连接
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";
}