微信小程序 五星評分的實現(xiàn)實例
更新時間:2017年08月04日 10:34:51 投稿:lqh
這篇文章主要介紹了微信小程序 五星評分的實現(xiàn)實例的相關(guān)資料,這里提供實現(xiàn)實例幫助大家實現(xiàn)改功能,需要的朋友可以參考下
微信小程序 五星評分
五星級評分效果:
<view> <view class="zan-font-16 my-ib" bindtap="myStarChoose"> <block wx:for="{{starMap}}"> <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text> <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text> </block> </view> <!--★--> <text class="zan-c-gray-dark">{{starMap[star-1]}}</text> </view>
這里的zan-font-16,zan-c-red,zan-c-gray-dark是ZanUI-WeApp的樣式。
這里的my-ib只是將設(shè)置display為inline-block。
Page({ data: { star: 0, starMap: [ '非常差', '差', '一般', '好', '非常好', ], }, myStarChoose(e) { let star = parseInt(e.target.dataset.star) || 0; this.setData({ star: star, }); } });
效果如圖:
以上就是微信小程序 五星評分的實例,如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
JavaScript設(shè)計模式之單例模式應(yīng)用場景案例詳解
這篇文章主要為大家介紹了JavaScript中單例模式的應(yīng)用場景案例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict,嚴(yán)格模式是JavaScript中的一種限制性更強的變種方式。嚴(yán)格模式并不是JavaScript中的子集,它在語義上與正常的代碼有明顯的差異,下面我們就一起來學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下2021-12-12fabric.js圖層功能獨立顯隱?添加?刪除?預(yù)覽實現(xiàn)詳解
這篇文章主要為大家介紹了fabric.js圖層功能獨立顯隱?添加?刪除?預(yù)覽實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹
這篇文章主要為大家介紹了前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09