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

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

原创

最新推荐文章于 2021-04-26 14:16:36 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

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

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

空心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"></view>

    <view class="item" style="left:40rpx" data-key="{
  
  {item+1}}" bindtap="selectRight"></view>

  </image&g