溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用微信小程序實現一個星星評分效果？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
思路很簡單，小星星都是一張張獨立的圖片，點擊的時候改變圖片的路徑就可以了。
我是用背景圖片做的，先給盒子設置背景圖片為灰色的小星星，盒子是根據js文件中的stars數組循環出來的，根據flag的值確定是灰色的小星星還是黃色的小星星，點擊的時候獲取當下這個盒子的index值，然后去更改stars數組中索引值小于等于index的每一項的flag就可以了。
當然，也可以用類名來控制灰色和黃色的小星星，在點擊的時候操作類名也是可以實現的。
實現代碼如下：
*.wxml文件
<view class="container">
<view class='stars'>
<image src=''></image>
<view class='content'>
<view>評分</view>
<view>
<view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;' data-index="{{index}}" bindtap='score'></view>
</view>
</view>
</view>
<view class='reviews'>
<textarea placeholder='請寫下購買體會或商品的相關信息，可以拉其他小伙伴提供參考~（評價在100字以內）'></textarea>
</view>
</view>*.wxss文件
.stars{
padding:85rpx 0 60rpx 273rpx;
box-sizing: border-box;
position: relative;
border-bottom: 1rpx solid #ececec;
background-color: #fff;
}
.stars image{
width: 190rpx;
height: 190rpx;
border: 1rpx solid #000;
position: absolute;
top: 41rpx;
left: 36rpx;
}
.stars .content view{
font-size: 32rpx;
color: #4a4a4a;
}
.stars .content>view:last-of-type{
height: 40rpx;
margin-top: 48rpx;
}
.stars .content>view:last-of-type view{
float: left;
width: 42rpx;
height: 42rpx;
margin-right: 25rpx;
background-size: 100% 100%;
}*.js文件
data: {
stars:[
{
flag:1,
bgImg: "/star.png",
bgfImg:"/f_star.png"
},
{
flag: 1,
bgImg: "/star.png",
bgfImg: "/f_star.png"
},
{
flag: 1,
bgImg: "/star.png",
bgfImg: "/f_star.png"
},
{
flag: 1,
bgImg: "/star.png",
bgfImg: "/f_star.png"
},
{
flag: 1,
bgImg: "/star.png",
bgfImg: "/f_star.png"
}
]
},
score:function(e){
var that=this;
for(var i=0;i<that.data.stars.length;i++){
var allItem = 'stars['+i+'].flag';
that.setData({
[allItem]: 1
})
}
var index=e.currentTarget.dataset.index;
for(var i=0;i<=index;i++){
var item = 'stars['+i+'].flag';
that.setData({
[item]:2
})
}
},看完上述內容，你們掌握使用微信小程序實現一個星星評分效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
