首頁  >  文章  >  微信小程式  >  淺談小程式怎麼實現「五星評價」功能(支援點擊+滑動)

淺談小程式怎麼實現「五星評價」功能(支援點擊+滑動)

青灯夜游
青灯夜游轉載
2021-08-20 10:44:303606瀏覽

本篇文章為大家介紹小程式實現「五星評價」功能的方法,支援實現點擊評分、滑動評分。

淺談小程式怎麼實現「五星評價」功能(支援點擊+滑動)

小程式—五星評估功能

#1、完成需求:

  • 支持半星評價
  • 點擊評分
  • 滑動評分

【相關學習推薦:小程式開發教學

2、原理

    /*wxss 一行内展示五颗星并设置其间距为30rpx*/
    .scoreContent {display: inline-block;}
    .starLen {margin-right: 30rpx;display: inline-block;}
    .scoreContent .starLen:last-child {margin-right: 0;}
    .star {width: 80rpx;height: 80rpx;vertical-align: text-bottom;display: inline-block;}
    /*wxml 每个starLen元素上绑定 touchMove touchEnd tap事件*/
    <view class="scoreContent" id="scoreContent">
      <block wx:for=&#39;{{5}}&#39; wx:key=&#39;item&#39;>
        <!-- 遍历评分列表 -->
        <view class=&#39;starLen&#39; catchtouchmove=&#39;changeScore&#39; catchtouchend="changeScoreEnd" catchtap=&#39;setScore&#39; data-index="{{index}}">
          <!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scoreArray的下标 -->
          <image class=&#39;star&#39; src="{{score>index?(score>index+0.5?fullStarUrl:halfStarUrl):nullStarUrl}}" />
        </view>
      </block>
    </view>
  • 以上渲染中重要的是,三目運算所要展示的應該是哪一種圖標,index為scoreArray的元素下標,每一個item的下標index都要與score進行比較,規則如下:
    //取 score与index下标做比较,默认score为0
    score<index    展示nullStar.png
    
    score>index+0.5  展示fullStar.png
    
    index<score<=index+0.5 展示halfStar.png
data預設值
  •   /**
       * 组件的初始数据
       */
      data: {
        fullStarUrl: &#39;/images/full.png&#39;, //满星图片
        halfStarUrl: &#39;/images/half.png&#39;, //半星图片
        nullStarUrl: &#39;/images/null.png&#39;, //空星图片
        score: 0, //评价分数
        rate: 2,  //设计稿宽度÷屏幕实际宽度
        startX: 0, //第一颗星screenX的距离
      },
    元件載入、資料做初始化
  • //设定比率rate与第一颗星screenX    组件初始化attached  或者 页面初始化onShow
    attached: function () { // 在组件实例进入页面节点树时执行
      let { screenWidth } = wx.getSystemInfoSync();
      let rate = screenWidth / 750;
      this.setData({
        rate: rate
      })
      
      const query = this.createSelectorQuery();
      query.select(&#39;#scoreContent&#39;).boundingClientRect((res)=> {
        this.setData({
          startX: res.left
        })
      }).exec()
    },

    #點選分數

    點選1次半星,點選2次整星;
  • 例如:點選是第4顆星(index="3 "),前三顆星為整星填充,目前點擊星為半星與整星的切換展示

    setScore(e) {
      //e.currentTarget.dataset.index 为当前的item的下标
      let score = e.currentTarget.dataset.index + 1;//实际的score
      if (score - this.data.score == 0.5) {//当前半星与整星的切换
        this.setData({
          score: score
        })
      } else {//点击其他星设置的分数
        this.setData({
          score: score - 0.5
        })
      }
    },

滑動評分(關鍵部分)

changeScore: function (e) {
  let score = 0;
  let restLen = 0; //(当前触摸点距初始点距离)-整数倍*(星星宽+星星之间间距)的剩余距离
  let intMult = 0; //取余后的整星数量
  var touchX = e.touches[0].pageX; //获取当前触摸点X坐标
  var starMinX = this.data.startX; //最左边第一颗星的X坐标
  var starWidth = 80 * this.data.rate; //星星图标的宽度,假设80(已在wxss文件中设置".star")
  var starLen = 30 * this.data.rate; //星星之间的距离假设为30(已在wxss文件中设置".starLen")
  var starMaxX = starMinX + starWidth * 5 + starLen * 4; //最右侧星星最右侧的X坐标,需要加上5个星星的宽度和4个星星间距

  if (touchX >= starMinX && touchX <= starMaxX) { //点击及触摸的初始位置在星星所在空间之内
    //使用Math.ceil()方法取得当前触摸位置X坐标相对于(星星+星星间距)之比的整数,确定当前点击的是第几个星星
    intMult = Math.floor((touchX - starMinX) / (starWidth + starLen));
    restLen = (touchX - starMinX) - intMult * (starWidth + starLen);

    if (0 <= restLen && restLen < 0.5 * starWidth) { //空星
      score = intMult
    } else if (0.5 * starWidth <= restLen && restLen < starWidth) { //显示半星
      score = intMult + 0.5
    } else if (starWidth <= restLen) { //显示整星
      score = intMult + 1;
    }
    if (score != this.data.score) { //如果当前得分不等于刚设置的值,才赋值,因为touchmove方法刷新率很高,这样做可以节省点资源
      this.setData({
        score: score,
      })
    }
  } else if (touchX < starMinX) { //如果点击或触摸位置在第一颗星星左边,则恢复默认值,否则第一颗星星会一直存在
    this.setData({
      score: 0,
    })
  } else if (touchX > starMaxX) {
    this.setData({
      score: 5,
    })
  }
},

更多程式相關知識,請造訪:###程式設計影片###! ! ###

以上是淺談小程式怎麼實現「五星評價」功能(支援點擊+滑動)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除