微信小程序progress組件使用詳解
更新時間：2018年01月31日 10:43:27 作者：Rattenking
這篇文章主要為大家詳細介紹了微信小程序progress組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序progress組件的使用方法，供大家參考，具體內(nèi)容如下
效果圖
WXML
<view class="tui-content">
<view class="tui-menu-list">
<text>show-info在進度條右側(cè)顯示百分比</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>動態(tài)設(shè)置進度條進度</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：進度條右側(cè)是否顯示進度條百分比
stroke-width：進度條寬度，單位px，默認(rèn)為6
color：進度條顏色
activeColor：已選擇的進度條的顏色
backgroundColor：未選擇的進度條的顏色
active：進度條從左往右的動畫
active-mode：backwards: 動畫從頭播；forwards：動畫從上次結(jié)束點接著播
DEMO下載
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例
這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪<BR>2022-04-04
Bootstrap基本插件學(xué)習(xí)筆記之輪播幻燈片(23)
這篇文章主要為大家詳細介紹了Bootstrap基本插件學(xué)習(xí)筆記之輪播幻燈片的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript判斷一個變量是否是數(shù)組的五種方式總結(jié)
在 JavaScript 編程中,我們經(jīng)常需要對不同類型的變量進行判斷和處理,其中,判斷一個變量是否是數(shù)組是一項基本且常見的任務(wù),在本篇博客中,我們將介紹幾種常用的方式來判斷一個變量是否是數(shù)組,并探討它們的優(yōu)缺點以及適用場景,需要的朋友可以參考下2023-11-11
JS使用Date對象實時顯示當(dāng)前系統(tǒng)時間簡單示例
這篇文章主要介紹了JS使用Date對象實時顯示當(dāng)前系統(tǒng)時間,涉及javascript基于定時器動態(tài)操作Date對象相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
本文主要介紹了javascript表單的Ajax提交插件的使用，具有一定的參考價值。下面跟著小編一起來看下吧2016-12-12
js點擊按鈕實現(xiàn)水波紋效果代碼（CSS3和Canves）
這篇文章主要為大家詳細介紹了點擊按鈕實現(xiàn)水波紋效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
基于Javascript實現(xiàn)網(wǎng)頁版的繪圖板
這篇文章主要為大家詳細介紹了如何基于HTML5 Canvas和jQuery實現(xiàn)的簡單網(wǎng)頁版繪圖編輯器,文中的示例代碼講解詳細,需要的小伙伴可以了解下2024-10-10
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)星星等級評價功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了JS實現(xiàn)針對給定時間的倒計時功能,結(jié)合具體實例形式分析了javascript日期時間的正則判定與動態(tài)運算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄猨son傳值以及ajax接收詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05