微信小程序实现星星评分组件(原生）

最新推荐文章于 2023-06-20 15:50:52 发布

苏苏哇哈哈

最新推荐文章于 2023-06-20 15:50:52 发布

阅读量1.3k

点赞数 1

分类专栏： git js 文章标签：微信小程序组件开发评分系统 JavaScript 事件处理

本文链接：https://blog.csdn.net/qq_48085286/article/details/119881086

版权

git 同时被 2 个专栏收录

47 篇文章

订阅专栏

22 篇文章

订阅专栏

该博客介绍了如何在微信小程序中实现一个评分组件。组件包括设置星星数量、只读模式、星星大小和显示评分等功能。在组件初始化时，根据预设的评分值动态设置星星填充状态。用户点击星星时，更新评分并触发事件。提供了部分关键代码展示，并给出了完整的代码仓库链接供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现效果

在这里插入图片描述

2.组件介绍

在这里插入图片描述

3.部分代码

// components/rating/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    stars:{
      type:Array,
      value:[1,1,1,1,1]
    },
    // 是否只读
    readOnly:{
      type:Boolean,
      value:false,
    },
    // 星星大小
    starWidth:{
      type:Number,
      value:54,
    },
    // 显示分数
    showRating:{
      type:Boolean,
      value:false,
    },
    rating:{
      type:Number,
      value:'',
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },
  lifetimes:{
    // 页面创建时执行
    attached(){
      let rating=this.properties.rating
      switch (rating) {
        case 1:
          this.properties.stars=[2,1,1,1,1]
          break;
        case 2:
          this.properties.stars=[2,2,1,1,1]
          break;
        case 3:
          this.properties.stars=[2,2,2,1,1]
          break;
        case 4:
          this.properties.stars=[2,2,2,2,1]
          break;
        case 5:
          this.properties.stars=[2,2,2,2,2]
          break;
      }
      this.setData({
        stars:this.properties.stars
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 选择星星
     * @param {*} e
     */
    choseStar: function (e) {
      let {stars}=this.data;
      stars.forEach((item,index)=> {
        stars[index] = 1;
        this.setData({
          stars,
        })
      })
      var {index} = e.currentTarget.dataset;
      for (var i = 0; i <= index; i++) {
        var item = 'stars[' + i + ']';
        this.setData({
            [item]: 2
        })
      }
      let a = this.data.stars.filter(item => item == 2)
      this.setData({
        rating: a.length
      })
      this.triggerEvent('click',this.data.rating);
    },
  }
})