小程序 评分组件
发现小程序的文档很全,自定义组件也挺简单的(PS:一直觉得小程序的框架和VUE的框架很像)分享一个评分组件,效果大概是这样的:jsComponent({options: {multipleSlots: false},data: {mark: 0,range:[1,2,3,4,5]},properties: {
·
发现小程序的文档很全,自定义组件也挺简单的
(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>
更多推荐
已为社区贡献1条内容
所有评论(0)