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