> 위챗 애플릿 > 미니 프로그램 개발 > 별 5개 등급을 달성하기 위한 WeChat 미니 프로그램의 예

별 5개 등급을 달성하기 위한 WeChat 미니 프로그램의 예

黄舟
풀어 주다: 2017-09-13 09:11:28
원래의
2437명이 탐색했습니다.

이 글에서는 주로 WeChat 미니 프로그램의 별 5개 등급 구현 사례에 대한 정보를 소개합니다. 여기서는 수정된 기능을 구현하는 데 도움이 되는 구현 예시를 제공합니다. 도움이 필요한 친구는 이를 참고할 수 있습니다.

WeChat 미니 프로그램 별 5개 등급

별 5개 평가 효과:


<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>
로그인 후 복사

여기서 zan-font-16, zan-c-red, zan-c-gray-dark는 ZanUI-WeApp의 스타일입니다.

여기 My-ib는 디스플레이를 인라인 블록으로 설정합니다.


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,
    });
  }
});
로그인 후 복사

효과는 그림과 같습니다:

위 내용은 별 5개 등급을 달성하기 위한 WeChat 미니 프로그램의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿