快捷導(dǎo)航

微信小程序如何實(shí)現(xiàn)五星評(píng)價(jià)功能

更新時(shí)間：2019年10月15日 11:09:47 作者：野馬yuanjili

這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)五星評(píng)價(jià)功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

效果

要實(shí)現(xiàn)的效果：點(diǎn)擊到第幾顆星，就要顯示到第幾顆星,<br data-filtered="filtered">/////////////////

接下來(lái)直接查看源碼：

<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
  });  
 },

這樣效果顯示如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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