微信小程序之五星评分栏展示

最新推荐文章于 2021-04-26 14:16:36 发布

爱Java不爱前端

最新推荐文章于 2021-04-26 14:16:36 发布

阅读量1.7k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/u014654607/article/details/79958533

版权

本文分享了如何在微信小程序中创建五星评分栏，通过图片实现空心、半星和整星的效果。提供了相关的wxml代码片段。

摘要由CSDN通过智能技术生成

话还是不多说了，还是直接上干货吧.

空心1.1.png;

半星1.2.png;

整星1.3.png ；

wxml:

<view class="contain">
<view class="title"><text>评价该课程</text></view>
<view class="star">
<block wx:for="{
  {stars}}">

  <image class="star-image" style="left: {
  {item*80}}rpx" src="{
  {key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">

    <view class="item" style="left:0rpx" data-key="{
  {item+0.5}}" bindtap="selectLeft">