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)
}
}
})
<!-- 五星打分组件 -->
<view>
<block wx:for="{{stars}}" wx:key="{{index}}">
<image class="star-image"
style="width: {{starW}}rpx; height: {{starH}}rpx;"
src="{{val > item ? (val-item < 1 ? starHalf : starFull) : starNo}}">
<view class="item"
style="left: 0rpx; width: {{starW}}rpx; height: {{starH}}rpx;"
data-val="{{item+0.5}}"
bindtap="{{disabled ?'' : '_selectHalf'}}"></view>
<view class="item"
style="left: {{starW/2}}rpx; width: {{starW}}rpx; height: {{starH}}rpx;"
data-val="{{item+1}}"
bindtap="{{disabled ?'' : '_selectFull'}}"></view>
</image>
</block>
</view>
.star-image{position: relative;}
.item{
position: absolute;
top: 0;
}
// 可选配置 disabled、starW、starH
<star-score val="{{3}}"></star-score>