使用微信小程序?qū)崿F(xiàn)一個(gè)星星評(píng)分效果？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

目前成都創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、城步網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

思路很簡(jiǎn)單，小星星都是一張張獨(dú)立的圖片，點(diǎn)擊的時(shí)候改變圖片的路徑就可以了。

我是用背景圖片做的，先給盒子設(shè)置背景圖片為灰色的小星星，盒子是根據(jù)js文件中的stars數(shù)組循環(huán)出來(lái)的，根據(jù)flag的值確定是灰色的小星星還是黃色的小星星，點(diǎn)擊的時(shí)候獲取當(dāng)下這個(gè)盒子的index值，然后去更改stars數(shù)組中索引值小于等于index的每一項(xiàng)的flag就可以了。
當(dāng)然，也可以用類名來(lái)控制灰色和黃色的小星星，在點(diǎn)擊的時(shí)候操作類名也是可以實(shí)現(xiàn)的。

實(shí)現(xiàn)代碼如下：

*.wxml文件
<view class="container">
 <view class='stars'>
 <image src=''></image>
 <view class='content'>
 <view>評(píng)分</view>
 <view>
 <view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1&#63;item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;' data-index="{{index}}" bindtap='score'></view>
 </view>
 </view>
 </view>
 <view class='reviews'>
 <textarea placeholder='請(qǐng)寫(xiě)下購(gòu)買(mǎi)體會(huì)或商品的相關(guān)信息，可以拉其他小伙伴提供參考~（評(píng)價(jià)在100字以內(nèi)）'></textarea>
 </view>
</view>

網(wǎng)站題目：使用微信小程序?qū)崿F(xiàn)一個(gè)星星評(píng)分效果-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://jinyejixie.com/article2/csdiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站導(dǎo)航、網(wǎng)站維護(hù)、定制網(wǎng)站、網(wǎng)站制作、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)