微信小程式之自定義模態彈窗(帶動畫)例項

2022-06-28 05:18:07 字數 1202 閱讀 8964

1、基本需求。

2、案例目錄結構

二、程式實現具體步驟

1.彈框index.wxml**

來點我呀

彈窗標題

標題 標題

標題標題

備註確定

2.彈框index.wxss**

/*button*/

.btn

/*mask*/

.drawer_screen

/*content*/

.drawer_box

.drawer_title

.drawer_content

.btn_ok

.top

.bottom

.title

.input_base

.input_h30

.input_h60

.input_view

input

radio

.grid

.col-0

.col-1

.fl

.fr

3.彈框index.js邏輯**

a.動畫部分的功能實現

util: function(currentstatu));

// 第2步:這個動畫例項賦給當前的動畫例項

this.animation = animation;

// 第3步:執行第一組動畫

animation.opacity(0).rotatex(-100).step();

// 第4步:匯出動畫物件賦給資料物件儲存

this.setdata()

// 第5步:設定定時器到指定時候後,執行第二組動畫

settimeout(function () )

//關閉

if (currentstatu == "close") );}

}.bind(this), 200)

// 顯示

if (currentstatu == "open") );}

}

三、案例執行效果圖

微信小程式自定義彈窗

首先wxml 暫無有關資訊 點選此處 注 hidden屬性用於切換比較頻繁的地方。wxss 設定彈窗樣式 mytoast js page onload function options onready function onshow function onhide function onunload...

微信小程式之自定義toast彈窗

第一步 新建乙個wxml檔案用來裝模板,方便以後使用,比如 然後在這裡面新增模板 template name toast name相當於模板的標識,引用的時候好判斷引用哪乙個 view class toast out wx if wx if是條件渲染,使用這個是為了好判斷是否顯示或隱藏toast v...

微信小程式自定義元件 帶動畫的彈窗元件

基本效果如下 具體實現如下 第一步 新建乙個 components 資料夾,用於存放我們以後開發中的所用元件,在 components 元件中新建乙個popup資料夾來存放我們的彈窗元件,在popup下右擊新建 component 並命名為 popup 後,會生成對應的 json wxml wxss...