이 글은 주로 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 ? 'tui-active' : ''}}">10%</text> <text data-id="30" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 30 ? 'tui-active' : ''}}">30%</text> <text data-id="50" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 50 ? 'tui-active' : ''}}">50%</text> <text data-id="70" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 70 ? 'tui-active' : ''}}">70%</text> <text data-id="90" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 90 ? 'tui-active' : ''}}">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의 차이점은 무엇인가요?
위 내용은 WeChat 미니 프로그램에서 진행 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!