微信小程序 五星評價(jià)功能的實(shí)現(xiàn)
更新時(shí)間：2017年03月09日 10:13:46 投稿：lqh
這篇文章主要介紹了微信小程序 五星評價(jià)功能的實(shí)現(xiàn)的相關(guān)資料,這里附有實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下
微信小程序 五星評價(jià)功能
話不多說，我們來看一下效果圖：
要實(shí)現(xiàn)的效果：點(diǎn)擊到第幾顆星，就要顯示到第幾顆星,
接下來直接查看源碼：
<view class="l-evalbox row">
<text class="l-evaltxt">滿意度：</text>
<view class="l-evalist flex-1" bindtap="chooseicon">
<icon class="{{tabArr.curHdIndex >'0'? 'cur icon' : 'icon'}}" data-id="1"></icon>
<icon class="{{tabArr.curHdIndex >'1'? 'cur icon' : 'icon'}}" data-id="2"></icon>
<icon class="{{tabArr.curHdIndex >'2'? 'cur icon' : 'icon'}}" data-id="3"></icon>
<icon class="{{tabArr.curHdIndex >'3'? 'cur icon' : 'icon'}}" data-id="4"></icon>
<icon class="{{tabArr.curHdIndex >'4'? 'cur icon' : 'icon'}}" data-id="5"></icon>
</view>
</view>
css如下：
.l-evalbox{
height: 100rpx;
padding: 0 3%;
margin-top: 10rpx;
background: #FFF;
line-height: 100rpx;
}
.l-evaltxt{
width: 120rpx;
display: block;
font-size: 26rpx;
color: #666666;
}
.l-evalist .icon{
background-position: -77rpx -246rpx;
width: 40rpx;
height: 43rpx;
margin-right: 30rpx;
}
.l-evalist .cur{
background-position: -128rpx -246rpx;
}
.l-evalist .icon:last-child{
margin: 0;
}
js代碼如下：
chooseicon:function(e){
var strnumber=e.target.dataset.id;
var _obj={};
_obj.curHdIndex=strnumber;
this.setData({
tabArr: _obj
});
},
這樣效果顯示如下：
感謝閱讀，希望幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
JS圖形編輯器場景坐標(biāo)視口坐標(biāo)的相互轉(zhuǎn)換
這篇文章主要為大家介紹了JS圖形編輯器之場景坐標(biāo)視口坐標(biāo)的相互轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Typescript類型系統(tǒng)FLOW靜態(tài)檢查基本規(guī)范
這篇文章主要為大家介紹了Typescript語言的類型系統(tǒng)FLOW靜態(tài)檢查基本規(guī)范，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
新聞內(nèi)頁-JS分頁...2006-06-06
JavaScript面試數(shù)組index和對象key問題詳解
這篇文章主要為大家介紹了JavaScript面試數(shù)組index和對象key問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
服務(wù)器端的響應(yīng)是302 Found，在ajax的回調(diào)函數(shù)中能夠獲取這個(gè)狀態(tài)碼嗎？能夠從Response Headers中得到Location的值進(jìn)行重定向嗎？讓我們來一起動(dòng)手寫寫代碼看看實(shí)際情況吧。2013-10-10
微信小程序（應(yīng)用號）簡單實(shí)例應(yīng)用及實(shí)例詳解
這篇文章主要介紹了微信小程序（應(yīng)用號）簡單實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2016-09-09
微信小程序 刪除項(xiàng)目工程實(shí)現(xiàn)步驟
這篇文章主要介紹了微信小程序 刪除項(xiàng)目工程實(shí)現(xiàn)步驟的相關(guān)資料,這里對刪除小程序的步驟進(jìn)行詳解和注意事項(xiàng)，需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了跨域設(shè)置Cookie失效問題解決方案原理分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JS前端畫布與組件元信息數(shù)據(jù)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析
這篇文章主要為大家介紹了sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07