[微信小程序-评分组件]星级评分组件(评分为整数)

一、组件效果图

星级评分组件效果图

二、组件源码

2.1 js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num:{
      type:Number,
      value:'',
      observer: function(newval, oldval) {
        // console.log("传过来的值",newval);
        this.updataNum(newval)
      },
    total:Number,
   gray:Number,

    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    num:0,
    total:"",
    gray:""
  },

  /**
   * 组件的方法列表
   */
  methods: {
   updataNum:function(newval){
    console.log(newval)
    this.setData({
      total:this.data.num,
      gray:5 - this.data.num
    })
   }
  },
  
})

2.2 json

{
  "component": true,
  "usingComponents": {}
}

2.3 wxml

<view class="star">
    
    <block wx:for="{{total}}" wx:key="*this">
        <!-- 循环填充的星星 -->
        <image class="img" src="../../images/icon/五角星 星型 total.svg"></image>
    </block>
    <block wx:for="{{gray}}" wx:key="*this">
        <!-- 循环灰色的星星 -->
        <image class="img" src="../../images/icon/五角星 星型 gray.svg"></image>
    </block>
</view>

2.4 wxss

.star{
  display: inline-flex;
}
.star .img{
  width: 24rpx;
  height: 24rpx;
}

三、如何使用

3.1 对应页面json引入组件

{
  "usingComponents": {
    "star":"../../../components/star/star"
  }
}

3.2 对应页面wxml使用

<star num="4" />

num:对应的评分属性

主要就是要注意组件动态传入数据的时候不能及时渲染数据的问题:

本文源码已经解决这个问题,具体可参考这篇文章:

© 版权声明
THE END
喜欢就支持一下吧
点赞0
评论 抢沙发

请登录后发表评论