위 챗 애플 릿 동적 평가 전시/오각별 전시/반 별 전시/사용자 정의 길이 표시 기능 구현

머리말
프로젝트 에서 만난 평 점 과 관련 된 수 요 는 사실 매우 많다.이전에 도 홈 페이지 에 평 점 기능 실현 에 관 한 문 서 를 쓴 적 이 있다.이번 에는 위 챗 애플 릿 개발 을 바탕 으로 간단 하고 편리 하 게 사용 할 수 있 는 방법 을 추출 한 것 으로 웹 개발 에서 도 사용 할 수 있다.이번에 사용 한 것 은 역시 글꼴 입 니 다.주로 글꼴 입 니 다.이것 은 비교적 통용 되 고 색깔,크기 는 모두 스스로 정의 할 수 있 습 니 다.당연 하지,가장 빨리 온 것 은 사실 그림 으로 대체 하 는 거 야.
2.위 챗 애플 릿 에서 평가 기능 실현
1.css 파일 에 글꼴 파일 을 도입 합 니 다.할 수 있어 요이것 을 누 르 면 글꼴 파일 다운로드

@font-face { 
 font-family: 'FontAwesome'; 
 src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff'); 
}

2.자신의 프로젝트 의 요구 에 따라 오각별 의 스타일 을 작성 한다.아래 참조

.start{margin-right:10rpx;}/*        */
/*   */
.start .icon:before {content: '\f005'; font-family: FontAwesome; position: absolute;left: 0;top: 0;display: block; overflow: hidden;}
.start .icon {display: block; font-size: 21px; text-align: center; width: 38rpx;height: 56rpx;line-height: 56rpx;position: relative;white-space: pre;}
/*     */
.start .icon_gray{color:#aaa}
/*     */
.start .icon_yellow:before {color: #F63;}

3.정태 적 으로 오각별 평 점 실현
1.정적 으로 이 루어 지면 너비 로 평가 효 과 를 직접 설정 하고 변색 이 필요 한 오각형 의 비례 를 직접 정의 할 수 있 습 니 다.별 이 라면 의사 요소 의 폭 을 50%로 직접 정의 할 수 있 습 니 다.1/3 개의 별 이 라면 너비 가 33%라 고 정의 할 수 있 습 니 다.마찬가지 로 2/3 개의 별 이 라면 폭 을 66%로 직접 정의 한다.아래 와 같다

/*           */
.half_star .icon_yellow:before {width: 50%;} 

2.html 코드 는 다음 과 같 습 니 다.

 <view >
  <view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">      </view>
  <view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">4.50</view>
  <view style="width:105px;margin:0 auto">
   <view style="display:flex;">  
    <view class="start"><view class="icon icon_yellow"></view></view>
    <view class="start"><view class="icon icon_yellow"></view></view>
    <view class="start"><view class="icon icon_yellow"></view></view>
    <view class="start"><view class="icon icon_yellow"></view></view>
    <view class="start half_star"><view class="icon icon_gray"><view class="icon icon_yellow"></view></view></view>
   </view>  
  </view>   
 </view> 

3.실현 효 과 는 다음 그림 과 같다.

4.동태 적 으로 평가 채점 효 과 를 실현 한다.
1.스타일 이 같 습 니 다(2.위 챗 애플 릿 에서 평가 기능 실현).너비 만 정의 하 는 곳 은 동적 할당 입 니 다.
2.보 여줄 초기 속성 값 을 정의 합 니 다.각각 보 여줄 노란색 오각별,회색 오각별,그리고 점 수 를 매 겨 야 할 노란색 오각별 이다.

Page({
 /**
 *        
 */
 data: { 
 yellow_start:0,//     ，          0 
 gray_start:5,//           5     5 
 start_per:0,//                   0 
 }
})

3.되 돌아 오 는 결과 에 따라 초기 화 된 데 이 터 를 바 꿉 니 다.예 를 들 어 배경 에서 돌아 오 는 평 점 은 3.62 점 입 니 다.

var start="3.62";//       
var yellow_start=parseInt(start);//         5  ，3.62        3         。
var start_per=parseFloat(start-yellow_start)*100;//3.62    -3      ， 0.62   ，   *100。           。              62%     。
var gray_start=parseInt(5-start);//         ，   5-3.62=1.38 ，0.38          。            1       
this.setData({ 
 start:start, //     
 yellow_start:yellow_start,//          
 start_per:start_per,//                
 gray_start:gray_start,//          
})

4.마지막 단 계 는 페이지 에서 어떻게 렌 더 링 하 느 냐 하 는 문제 입 니 다.위 챗 애플 릿 에서 의사 요소 의 스타일 값 을 동적 으로 수정 할 수 없 기 때문에[내 가 할 수 없 을 수도 있 고 할 수 있 는 친구 들 이 지적 할 수 있 습 니 다].그래서 그 백분율 을 차지 하 는 노란색 오각별 입 니 다.저 는 밑 에 회색 오각별+노란색 오각별 을 덮 는 것 을 사 용 했 습 니 다.모두 절대적 인 포 지 셔 닝 을 사 용 했 습 니 다.마지막 으로 노란색 오각별 은 width+overflow:hidden 으로 남 은 부 위 를 숨 겼 습 니 다.

<view>
  <view style="font-size:12px;color:#aaa;text-align:center;margin-top:5px;">      </view>
  <view style="font-size:32px;color:#f63;text-align:center;margin-top:5px;">{{start}}</view>
  <view style="width:105px;margin:0 auto">
   <view style="display:flex;">   
    <view class="start" wx:for="{{yellow_start}}"><view class="icon icon_yellow"></view></view>
    <view wx:if="{{start_per>0}}" class="start" style="position:relative;">
　　　　　　　　　　　　<view class="icon icon_gray"></view>
　　　　　　　　　　　　<view class="icon icon_yellow "style="width:{{start_per}}%;overflow:hidden;position:absolute;left:0;top:0;"></view>
　　　　　　　　　 </view>
    <view class="start" wx:for="{{gray_start}}"><view class="icon icon_gray"></view></view>
   </view>  
  </view>   
</view> 

5.실현 효과 도 는 다음 과 같다.

총화
이 효과 의 실현 은 단지 세 가지 일 뿐이다.첫 번 째 인용 글꼴.두 번 째 는 css 로 원 하 는 오각별 을 어떻게 그 리 느 냐 가 중요 하 다.동태 적 으로 그 블록 을 실현 하 는 것 은 어렵 지 않 고 생각 이 뚜렷 해 지면 자연히 수로 가 된다.
위 챗 애플 릿 동적 평 점 디 스 플레이/오각별 디 스 플레이/별 반 개 디 스 플레이/사용자 정의 길이 디 스 플레이 기능 의 실현 에 관 한 글 을 소개 합 니 다.더 많은 위 챗 애플 릿 평 점 디 스 플레이 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부탁드립니다!