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