微信小程序 五星評價功能的實現
更新時間：2017年03月09日 10:13:46 投稿：lqh
這篇文章主要介紹了微信小程序 五星評價功能的實現的相關資料,這里附有實例代碼及實現效果圖，需要的朋友可以參考下
微信小程序 五星評價功能
話不多說，我們來看一下效果圖：
要實現的效果：點擊到第幾顆星，就要顯示到第幾顆星,
接下來直接查看源碼：
<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
});
},
這樣效果顯示如下：
感謝閱讀，希望幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要為大家介紹了JS圖形編輯器之場景坐標視口坐標的相互轉換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Typescript類型系統FLOW靜態(tài)檢查基本規(guī)范
這篇文章主要為大家介紹了Typescript語言的類型系統FLOW靜態(tài)檢查基本規(guī)范，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
新聞內頁-JS分頁...2006-06-06
這篇文章主要為大家介紹了JavaScript面試數組index和對象key問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
服務器端的響應是302 Found，在ajax的回調函數中能夠獲取這個狀態(tài)碼嗎？能夠從Response Headers中得到Location的值進行重定向嗎？讓我們來一起動手寫寫代碼看看實際情況吧。2013-10-10
這篇文章主要介紹了微信小程序（應用號）簡單實例應用的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序 刪除項目工程實現步驟的相關資料,這里對刪除小程序的步驟進行詳解和注意事項，需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了跨域設置Cookie失效問題解決方案原理分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JS前端畫布與組件元信息數據流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了sessionStorage多Tab標簽頁數據共享問題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07