1.实现效果
点击星星 =》文字相应选中
点击文字=》星星相应的选中1-5个
2.实现原理
1.默认所有星星的选中值为1,1表示不选中,2表示选中。
2.获取当前星星的index值,假设此时选中星星的index=1,表示选中为第二个星星,则对星星列表进行2次循环,设置每一项的选中值为2,当为2显示选中的星星图片,反之未选择的状态。
3.获取此时选中值为2的列表长度,此假设情况下为2,为文字设置三元样式判断,若2等于index+1即为选中状态。
4.当点击文字的时候,将data-index写成4-index,(因为此时1颗星是index==0的情况,表示的极差,与之对应的文字索引为4。)
3.部分代码
checkScore(e){
this.data.stars.forEach(item=>{
item.flag=1
this.setData({
stars:this.data.stars
})
})
var index=e.currentTarget.dataset.index;
for(var i=0;i<=index;i++){
var item = 'stars['+i+'].flag';
this.setData({
[item]:2
})
}
let a=this.data.stars.filter(item=>item.flag==2)
this.setData({
chosedStar:6-a.length
})
},