微信小程序?qū)崿F(xiàn)的五星評價功能示例
更新時間：2019年04月25日 08:39:35 作者：guanguan0_0
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的五星評價功能,結(jié)合實例形式分析了微信小程序五星評價相關(guān)的界面布局、事件響應(yīng)等操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序?qū)崿F(xiàn)的五星評價功能。分享給大家供大家參考，具體如下：
實現(xiàn)五星評價功能，效果圖如下：
.wxml文件：
<view class="star-title">1、品質(zhì)效果</view>
<view class="star-pos">
<image class='stars' bindtap="changeColor" data-index='0' data-no="{{item}}" wx:for="{{stardata}}"
src="{{flag[0]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
<view style='margin-left: 30rpx;'>{{startext[0]}}</view>
</view>
<view class="star-title">2、服務(wù)質(zhì)量</view>
<view class="star-pos">
<image class='stars' bindtap="changeColor" data-index='1' data-no="{{item}}" wx:for="{{stardata}}"
src="{{flag[1]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
<view style='margin-left: 30rpx;'>{{startext[1]}}</view>
</view>
<view class="star-title">3、綜合管理</view>
<view class="star-pos">
<image class='stars' bindtap="changeColor" data-index='2' data-no="{{item}}" wx:for="{{stardata}}"
src="{{flag[2]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
<view style='margin-left: 30rpx;'>{{startext[2]}}</view>
</view>
.js 文件：
page: ({
data: {
flag:[0, 0, 0],
startext: ['', '', ''],
stardata: [1, 2, 3, 4, 5],
},
// 五星評價事件
changeColor: function (e) {
var index = e.currentTarget.dataset.index;
var num = e.currentTarget.dataset.no;
var a = 'flag[' + index + ']';
var b = 'startext[' + index + ']';
var that = this;
if(num == 1) {
that.setData({
[a]: 1,
[b]: '非常不滿意'
});
} else if (num == 2){
that.setData({
[a]: 2,
[b]: '不滿意'
});
} else if (num == 3) {
that.setData({
[a]: 3,
[b]: '一般'
});
} else if (num == 4) {
that.setData({
[a]: 4,
[b]: '滿意'
});
} else if (num == 5) {
that.setData({
[a]: 5,
[b]: '非常滿意'
});
}
},
})
.wxss文件：
.star-pos {
margin: 10rpx;
display: flex;
flex-direction: row;
}
.stars{
width: 40rpx;
height: 40rpx;
margin-left: 30rpx;
}
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
本文主要講解php連接、操作mongodb,有需求的朋友可以參考下2012-11-11
這篇文章主要介紹了jsPDF如何導(dǎo)出pdf，不過其貌似不支持中文,需要的朋友可以參考下2014-05-05
document.getElementById方法在Firefox與IE中的區(qū)別
相信很多朋友在寫JavaScript的時候，對瀏覽器的兼容問題會感到很頭疼。這不，煩什么，什么就來了，特記錄下來，與大家分享。2010-05-05
比較常用到的一些字符驗證函數(shù)，里面有正則等好東西，推薦大家保存即可直接調(diào)用。2009-03-03
有的時候頁面需要很多不同的表組成的數(shù)據(jù)，該怎么分頁呢？使用數(shù)據(jù)庫分頁很簡單，那么如何使用js實現(xiàn)分頁呢？接下來，小編幫大家解決這個問題，需要的朋友一起來學(xué)習(xí)吧2015-08-08
js+csss實現(xiàn)的一個帶復(fù)選框的下拉框
用js+csss實現(xiàn)的一個帶復(fù)選框的下拉框，用到了很基礎(chǔ)的技術(shù)，但是比較實用，喜歡的朋友可以參考下2014-09-09
這篇文章主要介紹了ES6字符串的擴(kuò)展實例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
本文給大家分析20行JS代碼實現(xiàn)粘貼板功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要給大家介紹了關(guān)于如何通過JavaScript讀取元素的樣式,文中通過實例代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
在js中判斷checkboxlist(.net控件客戶端id)是否有選中
添加或修改內(nèi)容時，需要對關(guān)鍵數(shù)據(jù)進(jìn)行判空處理，checkboxlist是否有選擇項如何使用js判斷實現(xiàn)，接下來為大家詳細(xì)介紹下實現(xiàn)方法，感興趣的朋友可以參考下哈2013-04-04