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

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

創(chuàng)新互聯(lián)是專業(yè)的覃塘網(wǎng)站建設公司，覃塘接單;提供成都網(wǎng)站建設、網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行覃塘網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

實現(xiàn)五星評價功能，效果圖如下：

微信小程序?qū)崿F(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、服務質(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ā)有所幫助。

網(wǎng)站名稱：微信小程序?qū)崿F(xiàn)的五星評價功能示例
分享URL：http://muchs.cn/article12/pdjhdc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、ChatGPT、搜索引擎優(yōu)化、品牌網(wǎng)站設計、商城網(wǎng)站、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設公司