微信小程序 制作五星评分组件

  • Post author:
  • Post category:小程序


这是自己做的一个五星评分组件,直接放项目里用,没有抽取为一个单独的组件,因为本身就很小,下面是一个纯显示的五星评级,如果需要打分,可以在image上加上点击事件,动态改变值。

index.wxml

<block wx:for="{{imgs}}" wx:key="{{item.id}}">
   <image class="star" src="{{item.id>starId?src:src1}}"></image>
</block>

index.wxss

.star{
          width: 25px;
          height: 25px;
          margin: 0 5rpx;
          vertical-align: middle;
        }

index.js

data:{
    imgs:[{id:1},{id:2},{id:3},{id:4},{id:5}],
    src:'../../imgs/star.png',
    src1:'../../imgs/star_yellow.png'
},
onLoad:function () {
    this.setData({starId:3})
}



版权声明:本文为lx_1024原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。