WeChat 미니 프로그램 별 5개 평가 기능 제작

이 글은 주로 WeChat Mini 프로그램의 별 5개 평가 기능 구현에 대한 관련 정보를 소개합니다. 여기에 첨부된 예제 코드와 구현 렌더링이 필요한 친구는

을 참조하세요. WeChat Mini 프로그램 별 5개 평가 기능

더 이상 고민할 필요 없이 렌더링을 살펴보겠습니다.

달성할 효과: 어떤 별을 클릭하면 별 개수를 표시해야 하는데,

다음으로 소스코드를 직접 확인해보세요:

<view class="l-evalbox row">
  <text class="l-evaltxt">满意度：</text>
  <view class="l-evalist flex-1" bindtap="chooseicon">
    <icon class="{{tabArr.curHdIndex >&#39;0&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="1"></icon>
    <icon class="{{tabArr.curHdIndex >&#39;1&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="2"></icon>
    <icon class="{{tabArr.curHdIndex >&#39;2&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="3"></icon>
    <icon class="{{tabArr.curHdIndex >&#39;3&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="4"></icon>
    <icon class="{{tabArr.curHdIndex >&#39;4&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="5"></icon>
  </view>
</view>

CSS는 다음과 같습니다:

.l-evalbox{
  height: 100rpx;
  padding: 0 3%;
  margin-top: 10rpx;
  background: #FFF;
  line-height: 100rpx;
}
.l-evaltxt{
  width: 120rpx;
  display: block;
  font-size: 26rpx;
  color: #666666;
}
.l-evalist .icon{
  background-position: -77rpx -246rpx;
  width: 40rpx;
  height: 43rpx;
  margin-right: 30rpx;
}
.l-evalist .cur{
  background-position: -128rpx -246rpx;
}
.l-evalist .icon:last-child{
  margin: 0;
}

js 코드는 다음과 같습니다.

chooseicon:function(e){
   
  var strnumber=e.target.dataset.id; 
   var _obj={};
    _obj.curHdIndex=strnumber; 
    this.setData({ 
     tabArr: _obj
    });
   
 },

이렇게 효과는 다음과 같이 표시됩니다.

읽어 주셔서 감사합니다. 모두에게 도움이 되었으면 좋겠습니다. 감사합니다. 이 사이트에 대한 귀하의 지원에 감사드립니다!

위 내용은 WeChat 미니 프로그램 별 5개 평가 기능 제작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!