最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序?qū)崿F(xiàn)的五星評價(jià)功能示例

 更新時(shí)間:2019年04月25日 08:39:35   作者:guanguan0_0  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的五星評價(jià)功能,結(jié)合實(shí)例形式分析了微信小程序五星評價(jià)相關(guān)的界面布局、事件響應(yīng)等操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)的五星評價(jià)功能。分享給大家供大家參考,具體如下:

實(shí)現(xiàn)五星評價(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],
    },
    // 五星評價(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]: '非常不滿意'
        });
      } 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)文章

最新評論

宁国市| 大悟县| 香格里拉县| 托克逊县| 乌兰浩特市| 江油市| 南靖县| 新闻| 张掖市| 会泽县| 循化| 柏乡县| 秦皇岛市| 河东区| 伊通| 开阳县| 青浦区| 眉山市| 张家口市| 夹江县| 涟水县| 宜城市| 阜宁县| 桂东县| 道孚县| 临汾市| 三河市| 香格里拉县| 安丘市| 英山县| 吴堡县| 和硕县| 阳泉市| 镇坪县| 广汉市| 象山县| 鄂尔多斯市| 芦溪县| 屯留县| 三原县| 武汉市|