Home  >  Article  >  WeChat Applet  >  Example of WeChat Mini Program to achieve five-star rating

Example of WeChat Mini Program to achieve five-star rating

黄舟
黄舟Original
2017-09-13 09:11:282404browse

This article mainly introduces relevant information about implementation examples of WeChat Mini Program five-star rating. Here are implementation examples to help you implement the modified function. Friends in need can refer to

WeChat Mini Program Five-Star Rating

Five-star rating effect:


<view>
  <view class="zan-font-16 my-ib" bindtap="myStarChoose">
    <block wx:for="{{starMap}}">
      <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text>
      <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text>
    </block>
  </view>
  <!--★-->
  <text class="zan-c-gray-dark">{{starMap[star-1]}}</text>
</view>

Here are zan-font-16,zan-c-red,zan-c- gray-dark is the style of ZanUI-WeApp.

My-ib here just sets the display to inline-block.


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

The effect is as shown:

The above is the detailed content of Example of WeChat Mini Program to achieve five-star rating. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn