自定义组件star-score：
star-score.js内容：
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否只读
disabled: {
type: Boolean,
value: false
},
// 传入的分值
val: {
type: Number,
value: 0
},
// 星星的宽度
starW: {
type: Number,
value: 40
},
// 星星的高度
starH: {
type: Number,
value: 40
}
},
/**
* 组件的初始数据
*/
data: {
stars: [0, 1, 2, 3, 4],
// 图片路径
starNo: '../../assets/star-no.png',
starHalf: '../../assets/star-half.png',
starFull: '../../assets/star-Full.png'
},
/**
* 组件的方法列表
*/
methods: {
// 选中半颗星
_selectHalf(e) {
let val = e.currentTarget.dataset.val
if (this.data.val == 0.5 && e.currentTarget.dataset.val == 0.5) {
// 只有半颗星的时候,再次点击,变为0颗
val = 0;
}
this.setData({
val: val
})
// 向父组件传值
this.triggerEvent('_selectStar', this.data.val)
},
// 选中满星
_selectFull(e) {
let val = e.currentTarget.dataset.val
this.setData({
val: val
})
// 向父组件传值
this.triggerEvent('_selectStar', this.data.val)
}
}
})
star-score.wxml的内容：
style="width: {{starW}}rpx; height: {{starH}}rpx;"
src="{{val > item ? (val-item < 1 ? starHalf : starFull) : starNo}}">
style="left: 0rpx; width: {{starW}}rpx; height: {{starH}}rpx;"
data-val="{{item+0.5}}"
bindtap="{{disabled ? '' : '_selectHalf'}}">
style="left: {{starW/2}}rpx; width: {{starW}}rpx; height: {{starH}}rpx;"
data-val="{{item+1}}"
bindtap="{{disabled ? '' : '_selectFull'}}">
star-score.wxss的内容：
.star-image{
position: relative;
}
.item{
position: absolute;
top: 0;
}
调用自定义组件star-score：
// 可选配置disabled、 starW、 starH
星星素材图
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
