[小程序开发]小程序评分组件源码学习

[小程序开发]小程序评分组件源码学习
（PS：一直觉得小程序的框架和VUE的框架很像）分享一个评分组件，效果大概是这样的：

 

 

 

小程序评分组件js部分

Component({
options: {
multipleSlots: false
},
data: {
mark: 0,
range:[1,2,3,4,5]
},
properties: {
mark: {
type: Number,
value: '',
observer: 'update'
}
},
methods: {
update: function (newVal, oldVal) {
this.setData({
mark:newVal
})
},
tapMark(e) {
let mark = parseInt(e.target.dataset.mark) || 0;
if(mark > 0){
this.setData({
mark: mark
});
this.triggerEvent('markChange', { mark:mark}, {})
}
}
}
})

小程序评分组件wxml

<view class='mark-like' bindtap='tapMark' >
<block wx:for="{{range}}" wx:key='index'>
<image wx:if="{{mark>=index+1}}" 
src='/image/mark_like.png'
data-mark="{{index+1}}"></image>
<image wx:if="{{mark<index+1}}" 
src='/image/mark_unlike.png'
data-mark="{{index+1}}"></image>
</block>
</view>