微信小程序?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)文章
document.getElementById方法在Firefox與IE中的區(qū)別
相信很多朋友在寫JavaScript的時候,對瀏覽器的兼容問題會感到很頭疼。這不,煩什么,什么就來了,特記錄下來,與大家分享。2010-05-05js+csss實現(xiàn)的一個帶復(fù)選框的下拉框
用js+csss實現(xiàn)的一個帶復(fù)選框的下拉框,用到了很基礎(chǔ)的技術(shù),但是比較實用,喜歡的朋友可以參考下2014-09-09在js中判斷checkboxlist(.net控件客戶端id)是否有選中
添加或修改內(nèi)容時,需要對關(guān)鍵數(shù)據(jù)進行判空處理,checkboxlist是否有選擇項如何使用js判斷實現(xiàn),接下來為大家詳細介紹下實現(xiàn)方法,感興趣的朋友可以參考下哈2013-04-04