小程式系統api 》彈窗

2022-02-14 03:51:09 字數 1232 閱讀 4925

主要分為四種彈窗:

一、showtoast('普通彈出窗')

wx.showtoast()

在showtoast中: title是必填的屬性;

duration:顯示時間(預設1500毫秒)

icon:顯示圖示 ------》  乙個有三個引數: 1.success 2.loading 3.none 其中success是預設值,loading就是載入的樣式,none則是不顯示圖示

image:「路徑」 ------》   自定義顯示圖示;

mask:true 新增遮罩層(預設false)

二、showmodal (『類似於confirm彈出框』)

wx.showmodal()

在showmodal中: 沒有必填屬性;

title:彈出框標題

content:文字內容

showcancel:true 是否顯示取消按鈕(預設值是true)

canceltext:"內容" 取消按鈕顯示的文字(最大4個字元)

cancelcolor:'顏色' 取消按鈕的顏色

confirmtext:"內容" 確認按鈕顯示的文字(最大4個字元)

confirmcolor:'顏色' 確認按鈕顯示的顏色

success:res=>else if(!res.confirm)

})

三、showloading(載入彈出框)

wx.showloading()

在showloading中:title是必填屬性

mask:遮罩層 預設為false

success:()=>

showloading 效果類似於toast中icon等於loading的效果,

區別是:toast有時間限制,而showloading中沒有時間限制

只有呼叫hideloading()方法 才可以關掉

該彈出框一般用於網路請求時,當請求成功時,呼叫hideloading()

四、showactionsheet(從下方彈出的選擇框)

wx.showactionsheet()

在showactionsheet中:itemlist是必填屬性(填寫型別是string)

itemcolor:改變按鈕文字顏色

success:res=>

}

小程式解決彈窗滑動穿透問題

解決方案 1.當彈窗沒有滾動條的時候 直接監聽 catch touchmove 方法,然後直接返回就可以了 preventtouchmove 2.當彈窗內容需要滾動的時候 當前頁面無需滾動如果你頁面沒有滾動條可以直接給當前頁面最父級元素fixed定位一下或者overflow hidden一下 3當彈...

微信小程式底部彈窗動畫

第一步,在元件裡編寫彈窗的 view class bottommodel wx if catchtouchmove tocatch view view class fixedmodel wx if animation view class wraps view class fixedtitle vi...

微信小程式表單彈窗例項

開發中有時候會碰到需要乙個表單彈窗來處理資料的提交處理,然後這次發布的這套原始碼就是解決這個問題!彈窗標題標題 標題標題 標題備註 確定 page powerdrawer function e util function currentstatu 第2步 這個動畫例項賦給當前的動畫例項 this.a...