国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 課堂 > 小程序 > 正文

微信小程序實現的五星評價功能示例

2020-03-21 15:59:21
字體:
來源:轉載
供稿:網友

本文實例講述了微信小程序實現的五星評價功能。分享給大家供大家參考,具體如下:

實現五星評價功能,效果圖如下:

微信小程序,五星評價

.wxml文件:

<view class="star-title">1、品質效果</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、服務質量</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;}

希望本文所述對大家微信小程序開發有所幫助。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 广水市| 防城港市| 遵化市| 金乡县| 呼伦贝尔市| 安吉县| 香河县| 全南县| 老河口市| 澄江县| 集安市| 蒲江县| 类乌齐县| 滦平县| 商洛市| 怀柔区| 化隆| 黄梅县| 兴城市| 承德县| 乐清市| 桂阳县| 讷河市| 清远市| 固安县| 乌拉特后旗| 永川市| 巴林左旗| 渑池县| 开阳县| 武鸣县| 六盘水市| 汾西县| 高清| 北票市| 宜城市| 高台县| 长乐市| 小金县| 祁连县| 托里县|