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