微信小程序如何實現五星評價功能
更新時間：2019年10月15日 11:09:47 作者：野馬yuanjili
這篇文章主要介紹了微信小程序如何實現五星評價功能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序如何實現五星評價功能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
效果
要實現的效果：點擊到第幾顆星，就要顯示到第幾顆星,<br data-filtered="filtered">/////////////////
接下來直接查看源碼：
<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<br data-filtered="filtered"><br data-filtered="filtered">
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;
}<br data-filtered="filtered">
js代碼如下：
chooseicon:function(e){
var strnumber=e.target.dataset.id;
var _obj={};
_obj.curHdIndex=strnumber;
this.setData({
tabArr: _obj
});
},
這樣效果顯示如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js如何操作iframe父子窗體,需要的朋友可以參考下2014-05-05
本文通過實例代碼給大家介紹了js實現alert的方法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-07-07
閉包是指內部函數總是可以訪問其所在的外部函數中聲明的變量和參數，即使在其外部函數被返回（壽命終結）了之后。這篇文章將為大家詳細介紹一下閉包的原理，作用及用途，快來跟隨小編一起學習一下吧2021-12-12
這篇文章主要介紹了理解JavaScript單一職責原則，單一職責原則（SRP：Single?responsibility?principle）又稱單一功能原則，面向對象五個基本原則（SOLID）之一，下文更多相關介紹感興趣的小伙伴可以參考一下2022-08-08
Vant?Weapp是有贊前端團隊開源的一套小程序UI組件庫,助力開發(fā)者快速搭建小程序應用,下面這篇文章主要給大家介紹了關于uniapp使用Vant-weapp的最新方法教程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了JavaScript布爾運算符原理使用解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
跳轉頁面的方法有很多，在本文整理了一些比較常用，并有示例代碼，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了javascript電商網站搶購倒計時效果實現代碼，掌握日期對象Date，獲取時間的方法，感興趣的小伙伴們可以參考一下2015-11-11
本文主要介紹了JavaScript寫的一個貪吃蛇游戲的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
基于zepto.js實現仿手機QQ空間的大圖查看組件ImageView.js詳解
這篇文章主要介紹了基于zepto.js實現仿手機QQ空間的大圖查看組件ImageView.js的源碼和使用方法，并附上一個使用ImageView.js的實例，這里分享給大家，有需要的小伙伴參考下。2015-03-03