微信小程序 五星評(píng)分的實(shí)現(xiàn)實(shí)例
微信小程序 五星評(píng)分
五星級(jí)評(píng)分效果:
<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, }); } });
效果如圖:
以上就是微信小程序 五星評(píng)分的實(shí)例,如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分
- 微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分和展示
- 微信小程序?qū)崿F(xiàn)星星評(píng)分效果
- 微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長度展示功能的實(shí)現(xiàn)
- 微信小程序?qū)崿F(xiàn)展示評(píng)分結(jié)果功能
- 微信小程序中的店鋪評(píng)分組件及vue中用svg實(shí)現(xiàn)的評(píng)分顯示組件
- 微信小程序五星評(píng)分效果實(shí)現(xiàn)代碼
- 微信小程序 五星評(píng)分(包括半顆星評(píng)分)實(shí)例代碼
- 微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評(píng)分功能
- 微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分與展示
相關(guān)文章
JavaScript設(shè)計(jì)模式之單例模式應(yīng)用場景案例詳解
這篇文章主要為大家介紹了JavaScript中單例模式的應(yīng)用場景案例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict,嚴(yán)格模式是JavaScript中的一種限制性更強(qiáng)的變種方式。嚴(yán)格模式并不是JavaScript中的子集,它在語義上與正常的代碼有明顯的差異,下面我們就一起來學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下2021-12-12fabric.js圖層功能獨(dú)立顯隱?添加?刪除?預(yù)覽實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了fabric.js圖層功能獨(dú)立顯隱?添加?刪除?預(yù)覽實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05微信小程序 action-sheet詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 action-sheet詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-11-11前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹
這篇文章主要為大家介紹了前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09