WeChat 미니 프로그램에서 진행 구성 요소를 사용하는 방법

이 글은 주로 WeChat 애플릿의 진행 구성요소 사용을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

이 글은 참고용으로 WeChat 애플릿의 진행 구성요소를 사용하는 방법을 공유합니다. 참고로 구체적인 내용은 다음과 같습니다

Rendering

WXML

<view class="tui-content">
 <view class="tui-menu-list">
  <text>show-info在进度条右侧显示百分比</text>
  <progress percent="50" show-info />
 </view>
 <view class="tui-menu-list">
  <text>stroke-width进度条线的宽度，单位px</text>
  <progress percent="50" stroke-width="12" show-info/>
 </view>
 <view class="tui-menu-list">
  <text>color进度条颜色</text>
  <progress percent="50" color="red" show-info/>
 </view>
 <view class="tui-menu-list">
  <text>active进度条从左往右的动画</text>
  <progress percent="50" active show-info/>
 </view>
 <view class="tui-menu-list">
  <text>backgroundColor未选择的进度条的颜色</text>
  <progress percent="50" backgroundColor="blue" active show-info/>
 </view>
 <view class="tui-menu-list">
  <text>动态设置进度条进度</text>
  <progress percent="{{index}}" show-info/>
 </view>
 <view class="tui-tabbar-content">
  <view class="tui-tabbar-group">
   <text data-id="10" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 10 ? &#39;tui-active&#39; : &#39;&#39;}}">10%</text>
   <text data-id="30" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 30 ? &#39;tui-active&#39; : &#39;&#39;}}">30%</text>
   <text data-id="50" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 50 ? &#39;tui-active&#39; : &#39;&#39;}}">50%</text>
   <text data-id="70" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 70 ? &#39;tui-active&#39; : &#39;&#39;}}">70%</text>
   <text data-id="90" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 90 ? &#39;tui-active&#39; : &#39;&#39;}}">90%</text>
  </view>
 </view>
</view>

JS

Page({
 data: {
  index: 10
 },
 changeTabbar(e){
  this.setData({ index: e.currentTarget.dataset.id})
 }
})

progress 속성

percent: 초기화 비율
show-info: 진행률 표시 여부 진행률 표시줄 오른쪽의 백분율
스트로크 너비: 진행률 표시줄의 너비, 단위 px, 기본값은 6
color: 진행률 표시줄의 색상
activeColor: 선택한 진행률 표시줄의 색상
BackgroundColor: 선택하지 않은 진행률 표시줄의 색상
active : 진행률 표시줄 왼쪽에서 오른쪽으로 애니메이션
활성 모드: 뒤로: 애니메이션이 처음부터 재생됩니다. 앞으로: 애니메이션이 마지막 종료 지점부터 재생됩니다.

위 내용은 모두를 위해 정리한 내용입니다. 앞으로도 다들.

관련 기사:

js에서 변수를 정의하는 let과 var의 차이점은 무엇인가요?

Nuxt.js Vue 서버 측 렌더링 탐색

VUE 개인 요약(발생한 문제)

위 내용은 WeChat 미니 프로그램에서 진행 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!