微信小程式 progress元件

2022-04-29 10:48:11 字數 1917 閱讀 7346

show-info在進度條右側顯示百分比text>

percent="50"

show-info />

view>

class="tui-menu-list">

stroke-width進度條線的寬度,單位pxtext>

percent="50"

stroke-width="12"

show-info/>

view>

class="tui-menu-list">

color進度條顏色text>

percent="50"

color="red"

show-info/>

view>

class="tui-menu-list">

active進度條從左往右的動畫text>

percent="50"

active

show-info/>

view>

class="tui-menu-list">

backgroundcolor未選擇的進度條的顏色text>

percent="50"

backgroundcolor="blue"

active

show-info/>

view>

class="tui-menu-list">

動態設定進度條進度text>

percent="}"

show-info/>

view>

class="tui-tabbar-content">

class="tui-tabbar-group">

data-id="10"

bindtap="changetabbar"

class="tui-tabbar-cell

}">10%text>

data-id="30"

bindtap="changetabbar"

class="tui-tabbar-cell

}">30%text>

data-id="50"

bindtap="changetabbar"

class="tui-tabbar-cell

}">50%text>

data-id="70"

bindtap="changetabbar"

class="tui-tabbar-cell

}">70%text>

data-id="90"

bindtap="changetabbar"

class="tui-tabbar-cell

}">90%text>

view>

view>

view>

page(,

changetabbar(e))

}})

percent:初始化所佔百分比

show-info:進度條右側是否顯示進度條百分比

stroke-width:進度條寬度,單位px,預設為6

color:進度條顏色

activecolor:已選擇的進度條的顏色

backgroundcolor:未選擇的進度條的顏色

active:進度條從左往右的動畫

active-mode:backwards: 動畫從頭播;forwards:動畫從上次結束點接著播

我的部落格,歡迎交流!

我的csdn部落格,歡迎交流!

前端筆記專欄

前端筆記列表

遊戲列表

微信小程式 progress元件

show info在進度條右側顯示百分比 stroke width進度條線的寬度,單位px color進度條顏色 active進度條從左往右的動畫 backgroundcolor未選擇的進度條的顏色 動態設定進度條進度 10 30 50 70 90 page changetabbar e perce...

微信小程式progress元件使用詳解

效果圖 wxml l程式設計客棧t text show info在進度條右側顯示百分比 stroke width進度條線的寬度,單位px color進度條顏色 active進度條從左往右的動畫 backgroundcolor未選擇的進度條的顏色 動態設定進度條進度 10 30 50 程式設計客棧lt...

微信小程式 progress 進度條

設定進度條顏色 請使用十六進製制顏色值,例如 ff00ff 未選擇的進度條的顏色 請使用十六進製制顏色值,例如 ff00ff 設定 取消進度條從左往右的動畫 設定 取消進度條右側顯示百分比 獲取應用例項 var isfirst true var issifirst true page onload ...