Eine kurze Diskussion darüber, wie Miniprogramme die Funktion „Fünf-Sterne-Bewertung' implementieren (unterstützt Click + Slide)

In diesem Artikel erfahren Sie, wie Sie die Funktion „Fünf-Sterne-Bewertung“ im Miniprogramm implementieren, das Klick- und Schiebebewertungen unterstützt.

Mini-Programm – Fünf-Sterne-Bewertungsfunktion

1. Erfüllte Anforderungen:

• Unterstützen Sie die Halb-Stern-Bewertung
• Zum Bewerten klicken
• Gleitende Bewertung

【Verwandtes Lernen Empfehlungen: Mini-Tutorial zur Programmentwicklung]

2. Prinzip

• Seitenlayout

/*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>

Was bei der obigen Darstellung wichtig ist, ist, welche Art von Symbol durch die trinokulare Bedienung angezeigt werden soll, und Der Index ist das Element von scoreArray Subscript. Der Index jedes Elements muss mit der Punktzahl verglichen werden. Die Regeln lauten wie folgt:

//取 score与index下标做比较,默认score为0
score<index    展示nullStar.png

score>index+0.5  展示fullStar.png

index<score<=index+0.5 展示halfStar.png

• Datenstandardwert

  /**
   * 组件的初始数据
   */
  data: {
    fullStarUrl: '/images/full.png', //满星图片
    halfStarUrl: '/images/half.png', //半星图片
    nullStarUrl: '/images/null.png', //空星图片
    score: 0, //评价分数
    rate: 2,  //设计稿宽度÷屏幕实际宽度
    startX: 0, //第一颗星screenX的距离
  },

• Komponentenladen, Dateninitialisierung

//设定比率rate与第一颗星screenX    组件初始化attached  或者 页面初始化onShow
attached: function () { // 在组件实例进入页面节点树时执行
  let { screenWidth } = wx.getSystemInfoSync();
  let rate = screenWidth / 750;
  this.setData({
    rate: rate
  })
  
  const query = this.createSelectorQuery();
  query.select('#scoreContent').boundingClientRect((res)=> {
    this.setData({
      startX: res.left
    })
  }).exec()
},

• Klicken Sie, um zu bewerten

  Klicken Sie 1 Mal für einen halben Stern, klicken Sie 2 Mal für einen vollen Stern;

  Zum Beispiel: Der Klick ist der 4. Stern (Index = „3“), die ersten drei Sterne werden ausgefüllt volle Sterne, der aktuell angeklickte Stern ist ein halber Stern und ein voller Stern. Wechselnde Anzeige der Sterne

  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
      })
    }
  },

• Sliding Rating (Schlüsselteil)

  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,
      })
    }
  },

Für weitere Programmierkenntnisse besuchen Sie bitte: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie Miniprogramme die Funktion „Fünf-Sterne-Bewertung' implementieren (unterstützt Click + Slide). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!