您好,登錄后才能下訂單哦!
使用微信小程序?qū)崿F(xiàn)一個星星評分效果?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
思路很簡單,小星星都是一張張獨立的圖片,點擊的時候改變圖片的路徑就可以了。
我是用背景圖片做的,先給盒子設(shè)置背景圖片為灰色的小星星,盒子是根據(jù)js文件中的stars數(shù)組循環(huán)出來的,根據(jù)flag的值確定是灰色的小星星還是黃色的小星星,點擊的時候獲取當下這個盒子的index值,然后去更改stars數(shù)組中索引值小于等于index的每一項的flag就可以了。
當然,也可以用類名來控制灰色和黃色的小星星,在點擊的時候操作類名也是可以實現(xiàn)的。
實現(xiàn)代碼如下:
*.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='請寫下購買體會或商品的相關(guān)信息,可以拉其他小伙伴提供參考~(評價在100字以內(nèi))'></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 }) } },
看完上述內(nèi)容,你們掌握使用微信小程序?qū)崿F(xiàn)一個星星評分效果的方法了嗎?如果還想學到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。