PHP前端开发

微信小程序之实现五星评分的示例

百变鹏仔 4天前 #前端问答
文章标签 示例

这篇文章主要介绍了微信小程序 五星评分的实现实例的相关资料,这里提供实现实例帮助大家实现改功能,需要的朋友可以参考下

微信小程序 五星评分

五星级评分效果:


<view>  <view>    <block>      <text>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}"&gt;★</text>      <text>☆</text>    </block>  </view>  <!--★-->  <text>{{starMap[star-1]}}</text></view>

这里的zan-font-16,zan-c-red,zan-c-gray-dark是ZanUI-WeApp的样式。

这里的my-ib只是将设置display为inline-block。


Page({  data: {    star: 0,    starMap: [      '非常差',      '差',      '一般',      '好',      '非常好',    ],  },  myStarChoose(e) {    let star = parseInt(e.target.dataset.star) || 0;    this.setData({      star: star,    });  }});

效果如图: