미니 프로그램이 '별 5개 평가' 기능을 구현하는 방법에 대한 간략한 설명(클릭 + 슬라이드 지원)

이 글에서는 클릭 및 슬라이딩 등급을 지원하는 미니 프로그램에서 "별 5개 평가" 기능을 구현하는 방법을 소개합니다.

미니 프로그램 - 별 5개 평가 기능

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>

위 렌더링에서 중요한 것은 삼안 연산으로 어떤 종류의 아이콘을 표시해야 하는지이고, 인덱스는 ScoreArray Subscript의 요소이며, 각 항목의 첨자 인덱스를 점수와 비교해야 합니다. 규칙은 다음과 같습니다:

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

score>index+0.5  展示fullStar.png

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

• 데이터 기본값

  /**
   * 组件的初始数据
   */
  data: {
    fullStarUrl: '/images/full.png', //满星图片
    halfStarUrl: '/images/half.png', //半星图片
    nullStarUrl: '/images/null.png', //空星图片
    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('#scoreContent').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,
      })
    }
  },

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 미니 프로그램이 '별 5개 평가' 기능을 구현하는 방법에 대한 간략한 설명(클릭 + 슬라이드 지원)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!