Perbincangan ringkas tentang cara melaksanakan fungsi 'penilaian lima bintang' dalam program mini (menyokong klik dan gelongsor)

Artikel ini akan memperkenalkan kepada anda cara melaksanakan fungsi "penilaian lima bintang" program mini, yang menyokong penilaian klik dan gelongsor.

Program Mini—Fungsi penilaian lima bintang

Keperluan lengkap:

• Sokong penilaian separuh bintang
• Klik untuk menilai
• Rating gelongsor

[Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

2. 🎜>

Apa yang penting dalam pemaparan di atas ialah jenis ikon yang perlu dipaparkan oleh operasi trinokular. Indeks ialah subskrip elemen skorArray mesti dibandingkan dengan skor. Sebagai perbandingan, peraturannya adalah seperti berikut:

nilai lalai data

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

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

score>index+0.5  展示fullStar.png

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

Pemuatan komponen, permulaan data

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

Klik untuk menilai

Klik 1 kali untuk separuh bintang, klik 2 kali untuk bintang penuh;

//设定比率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()
},

Contohnya: Klik ialah bintang ke-4 (index="3"), tiga bintang pertama diisi dengan bintang penuh, bintang yang diklik semasa ialah paparan bertukar antara separuh bintang dan penuh bintang

• Penilaian gelongsor (bahagian utama)

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

  Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Video Pengaturcaraan
• ! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara melaksanakan fungsi 'penilaian lima bintang' dalam program mini (menyokong klik dan gelongsor). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!