消息提示框 toast
代碼結構
<toast bindchange="...">
消息内容
</toast> 複制
屬性
- duration - 消息顯示的時間，機關毫秒，預設值 1500
- bindchange - duration 時間到期後觸發的事件
進度條 progress
代碼結構
<progress percent="20" /> 複制
屬性
- percent - 百分比0~100
- show-info - 顯示百分比
- stroke-width - 進度條寬度，機關px
- color - 進度條顔色
- active - true/false 是否顯示動畫
底部菜單表 action-sheet
代碼結構
<action-sheet>
<action-sheet-item>xxx</action-sheet-item>
...
<action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet> 複制
中包含多個子選項 ，還有一個取消按鈕
屬性
- bindchange - 點選背景或 action-sheet-cancel 按鈕時觸發 change 事件
模态彈窗 modal
代碼結構
<modal title="标題" confirm-text="confirm"...>
這是對話框的内容。
</modal> 複制
屬性
- title - 标題
- no-cancel - 是否隐藏 cancel 按鈕
- confirm-text - confirm 按鈕文字
- cancel-text - cancel-text
- bindconfirm - 點選 confirm 觸發的事件
- bindcancel - 點選 cancel 以及蒙層觸發的事件
導航 navigator
代碼結構
<navigator url="navigate?title=navigate">
跳轉到新頁面
</navigator> 複制
屬性
- url - 跳轉連結
- redirect - true/false，是否關閉目前頁面
- hover-class - 指定點選時的樣式
源碼下載下傳
微信小程式視圖元件.zip