微信小程序 五星評分的實現(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-05
本文主要介紹Google 地圖API Map(),這里對Map()構(gòu)造器的知識做了一下整理以及提供簡單的代碼示例,開發(fā)Google 地圖應(yīng)用的朋友可以參考下2016-08-08
本文主要介紹Google 地圖疊加層,這里幫大家整理了Google地圖疊加層一些實用代碼并詳細(xì)介紹了相關(guān)知識，有需要的小伙伴可以參考下2016-08-08
JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict，嚴(yán)格模式是JavaScript中的一種限制性更強的變種方式。嚴(yán)格模式并不是JavaScript中的子集，它在語義上與正常的代碼有明顯的差異，下面我們就一起來學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下2021-12-12
今天小編就為大家分享一篇關(guān)于使用Sonarqube掃描Javascript代碼的示例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
fabric.js圖層功能獨立顯隱?添加?刪除?預(yù)覽實現(xiàn)詳解
這篇文章主要為大家介紹了fabric.js圖層功能獨立顯隱?添加?刪除?預(yù)覽實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序中form 表單提交和取值實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 action-sheet詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-11-11
前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹
這篇文章主要為大家介紹了前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本文主要介紹Google 地圖控件集,這里幫大家整理了關(guān)于Google地圖控件集的基礎(chǔ)知識,詳細(xì)介紹了控件的功能，并附示例代碼，有需要的小伙伴可以參考下2016-08-08