微信小程序 五星評價功能的實現(xiàn)
更新時間：2017年03月09日 10:13:46 投稿：lqh
這篇文章主要介紹了微信小程序 五星評價功能的實現(xiàn)的相關(guān)資料,這里附有實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下
微信小程序 五星評價功能
話不多說，我們來看一下效果圖：
要實現(xià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)文章
這篇文章主要介紹了微信小程序 modal詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-11-11
超級強大的表單驗證...2006-06-06
這篇文章主要介紹了微信小程序 地圖定位簡單實例的相關(guān)資料,并附實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下2016-10-10
基于JavaScript ES新特性let與const關(guān)鍵字
這篇文章主要介紹了基于JavaScript ES新特性let與const關(guān)鍵字，let是ECMAScript 2015新增的一個關(guān)鍵字，用于聲明變量，const關(guān)鍵字用于聲明一個常量，更多詳細內(nèi)容，請需要的小伙伴參考下面文章的介紹，希望對你有所幫助2021-12-12
這篇文章主要介紹了微信小程序中頂部導(dǎo)航欄的實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了微信小程序 數(shù)據(jù)訪問實例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了Web Worker線程解決方案electron踩坑記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了微信小程序 地圖map實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序 簡單DEMO布局，邏輯，樣式的練習(xí)的相關(guān)資料,這里寫一個簡單實例練習(xí)小程序的布局，并附實例代碼和實現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了JavaScript手寫異步加法asyncAdd方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08