这些天可能是星辰大海说的太多了，所以写代码的时候就遇到了星级评分的这个问题，因为星级评分你点击评分可能有半星和一星，所以展示评分的时候就会出现小数点，比如说4.1,3.7等，然后展示出来的星星就不能是一整个，当然我也看了一些APP，可能为了方便吧，采取了四舍五入取整的这种方法，也是可取的，毕竟能简单一点，但是为了完美起见，我苦苦研究了好长时间，虽然不是很完美，而且方法可能也有些幼稚，但是也算是坎坎坷坷的解决了问题，，，哈哈哈，下面我粘一下我的代码，希望能为可爱的你提供一点点帮助。
首先是wxml
<!--pages/test1/test1.wxml-->
<view class="score">
<image src="../../image/score1.png" wx:for="{{ width }}" wx:key="unique" data-index="{{ index }}" style="width: {{ fontSize + 'rpx' }}; height: {{ fontSize + 'rpx' }};">
<view class="star" style="width: {{ item + 'rpx' }}; height: {{ fontSize + 'rpx' }}; overflow:hidden;">
<image class="star" src="{{stars[index]}}" style="width: {{fontSize + 'rpx' }}; height: {{ fontSize + 'rpx' }};">
</image>
</view>
</image>
</view>
wxss
.score{
width:40%;
display:flex;
justify-content: space-between;
align-items:center;
}
.star{
position: absolute;//这里做了定位，是将所有的块叠在一起
top:0;
}
js
// pages/test1/test1.js
Page({
/**
* 页面的初始数据
*/
data: {
stars: ['../../image/score1.png', '../../image/score1.png', '../../image/score1.png', '../../image/score1.png', '../../image/score1.png'],
width: ['50','50','50','50','50'],
value:0,
active:'../../image/score2.png',
margin: 2,
fontSize: '50'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var newwidth=this.data.width;
var newstars=this.data.stars
var value= 5;
this.setData({
value:value
})
for(var i=0;i<value-1;i++){
newwidth[i] = this.data.fontSize
newstars[i] = this.data.active
}
console.log(i);
newwidth[i] = (value-i)*this.data.fontSize
newstars[i] = this.data.active
console.log(newwidth[i])
console.log(newstars[i])
this.setData({
width:newwidth,
stars:newstars
})
console.log(this.data.width)
console.log(this.data.stars)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
这里比较重要的一点就是对i的使用，for循环后出来的i为i++后的i的值，然后我做出来的这个可能有些麻烦，也谈不上有什么健壮性，所以肯定有许多需要修改的地方，等到我们联调的时候有需要改正或改进的地方我会再次进行修改的。
好滴好滴，就先到这里吧！！！
网友评论