微信小程序怎么实现“五星评价”功能「支持点击+滑动」

1. 简介

微信小程序是一种构建于微信平台之上的小型应用程序，具有较为基础的功能，如API调用、数据存储、用户身份认证等。其中，五星评价功能是小程序中十分常见的一种功能之一，因此如何实现五星评价功能就成了一个有趣的问题。

2. 基本思路

五星评价的基本逻辑非常简单，就是让用户点击或者滑动五颗星星，根据用户的行为来确定用户的评分。在实现五星评价功能的过程中，我们可以采用以下两种实现方式：

2.1 方案一：自定义评价组件

这种方案的主要思路是通过自定义组件的方式来实现五星评价，具体措施如下：

进行组件设计

// 小程序自定义组件，实现五星评价功能
// star.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    max: {
      type: Number,
      value: 5
    },
    score: {
      type: Number,
      value: 0
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    stars: []
  },
  /**
   * 组件生命周期函数，在组件实例进入页面节点树时执行
   */
  attached: function () {
    var stars = [];
    for (var i = 1; i <= this.data.max; i++) {
      stars.push({
        flag: i <= this.data.score
      });
    }
    this.setData({
      stars: stars
    });
  },
  /**
   * 组件的方法列表
   */
  methods: {
    tapStar: function (e) {
      var index = e.currentTarget.dataset.index + 1;
      var stars = [];
      for (var i = 1; i <= this.data.max; i++) {
        stars.push({
          flag: i <= index
        });
      }
      this.setData({
        stars: stars
      });
      this.triggerEvent('ratechange', {
        score: index
      });
    },
    swipeStar: function (e) {
      console.log(e.changedTouches[0]);
      var index = this.getIndex(e.changedTouches[0].clientX - this.data.startLeft);
      var stars = [];
      for (var i = 1; i <= this.data.max; i++) {
        if (i <= index) {
          stars.push({
            flag: true
          });
        } else if (i > index) {
          stars.push({
            flag: false
          });
        }
      }
      this.setData({
        stars: stars
      });
      if (e.type == 'touchstart') {
        this.setData({
          startLeft: e.changedTouches[0].clientX
        });
      } else if (e.type == 'touchend') {
        this.triggerEvent('ratechange', {
          score: index
        });
      }
    },
    getIndex: function (x) {
      return Math.ceil(x / this.data.starWidth);
    }
  },
  /**
   * 组件在页面布局完成后执行
   */
  ready: function () {
    var res = wx.getSystemInfoSync();
    var starWidth = res.windowWidth / this.data.max;
    this.setData({
      starWidth: starWidth
    });
  }
})

在页面中使用组件

// index.js
Page({
  data: {
    score: 0
  },
  onRateChange: function (e) {
    this.setData({
      score: e.detail.score
    });
  }
})

2.2 方案二：使用已有评价组件

如果开发者不想从头开始开发五星评价组件，也可以使用一些已有的评价组件，如WeUI、iView等。如下面的代码所示：

WeUI示例

// index.wxml
<view class="weui-cells__title">评价星级:</view>
    <view class="weui-cells__tips">点击或拖动星星进行评价</view>
    <view class="weui-grids">
        <view class="weui-grid">
            <view class="weui-grid__label">自定义颜色</view>
            <view class="weui-grid__content">
                <icon class="weui-tabbar__icon rated-star" type="success" size="20" wx:if="{{n>=1}}" />
                <icon class="weui-tabbar__icon rate-star" type="success" size="20" wx:if="{{n<1}}" />
                <icon class="weui-tabbar__icon rated-star" type="success" size="20" wx:if="{{n>=2}}" />
                <icon class="weui-tabbar__icon rate-star" type="success" size="20" wx:if="{{n<2}}" />
                <icon class="weui-tabbar__icon rated-star" type="success" size="20" wx:if="{{n>=3}}" />
                <icon class="weui-tabbar__icon rate-star" type="success" size="20" wx:if="{{n<3}}" />
                <icon class="weui-tabbar__icon rated-star" type="success" size="20" wx:if="{{n>=4}}" />
                <icon class="weui-tabbar__icon rate-star" type="success" size="20" wx:if="{{n<4}}" />
                <icon class="weui-tabbar__icon rated-star" type="success" size="20" wx:if="{{n>=5}}" />
                <icon class="weui-tabbar__icon rate-star" type="success" size="20" wx:if="{{n<5}}" />
                <slider min="0" max="5" block-size="20" step="1" value="{{n}}" bindchange="slider4change" />
            </view>
        </view>
    </view>

3. 实现效果对比

对于这两种方案而言，各有优缺点。自定义评价组件的优势在于它可以根据实际项目需求进行量身定制，比较灵活；而已有评价组件则无需从头开发，对于快速迭代开发比较适合。

4. 总结

以上就是实现五星评价功能的两种方式。通过对这两种方案的分析和比较，我们可以看出，在实际项目开发中，该如何选择评价功能的实现方案需要根据具体情况而定。无论哪种方案，都需要考虑到实现的简洁性、易用性以及用户体验，才能达到最佳效果。