이 글에서는 주로 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: [ '非常差', '差', '一般', '好', '非常好', ], }, myStarChoose(e) { let star = parseInt(e.target.dataset.star) || 0; this.setData({ star: star, }); } });
효과는 그림과 같습니다:
위 내용은 별 5개 등급을 달성하기 위한 WeChat 미니 프로그램의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!