小程序開(kāi)發(fā)?page-container?頁(yè)面容器彈出對(duì)話框功能的實(shí)現(xiàn)
前言
小程序彈窗對(duì)話框?qū)崿F(xiàn)
效果圖
代碼
.js
// pages/demo2/demo2.js Page({ data: { show:false }, exitBtn:function(e) { this.setData({ show:false }) }, showDialogBtn:function (e) { this.setData({ show:true }) } })
.wxml
<!--pages/demo2/demo2.wxml--> <button bindtap="showDialogBtn">顯示對(duì)話框</button> <!-- page-container 的參數(shù): 屬性 類型 默認(rèn)值 必填 說(shuō)明 show boolean false 否 是否顯示容器組件 duration number 300 否 動(dòng)畫(huà)時(shí)長(zhǎng),單位毫秒 z-index number 100 否 z-index 層級(jí) overlay boolean true 否 是否顯示遮罩層 position string bottom 否 彈出位置,可選值為 top bottom right center round boolean false 否 是否顯示圓角 close-on-slideDown boolean false 否 是否在下滑一段距離后關(guān)閉 overlay-style string 否 自定義遮罩層樣式 custom-style string 否 自定義彈出層樣式 bind:beforeenter eventhandle 否 進(jìn)入前觸發(fā) bind:enter eventhandle 否 進(jìn)入中觸發(fā) bind:afterenter eventhandle 否 進(jìn)入后觸發(fā) bind:beforeleave eventhandle 否 離開(kāi)前觸發(fā) bind:leave eventhandle 否 離開(kāi)中觸發(fā) bind:afterleave eventhandle 否 離開(kāi)后觸發(fā) bind:clickoverlay eventhandle 否 點(diǎn)擊遮罩層時(shí)觸發(fā) --> <page-container show="{{show}}" round="true" bind:afterleave="afterLeave" > <view style="display:flex; flex-direction: column;"> <text style="text-align: center; padding-top: 5%; padding-bottom: 5%; background-color: greenyellow;">標(biāo)題</text> <text style="text-align: center; padding-top: 20%; padding-bottom: 20%; background-color: aqua; ">內(nèi)容</text> <button bindtap="exitBtn" style="width: 100%; background-color: grey;" >退出</button> </view> </page-container>
.wxss
/* pages/demo2/demo2.wxss */ page{ background:tan; }
到此這篇關(guān)于小程序開(kāi)發(fā) page-container 頁(yè)面容器,彈出對(duì)話框的文章就介紹到這了,更多相關(guān)小程序開(kāi)發(fā)彈出對(duì)話框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換
跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換,感興趣的小伙伴們可以學(xué)習(xí)一下2015-11-11webpack5處理圖片、圖標(biāo)字體、多媒體等靜態(tài)資源文件
在 webpack5 中內(nèi)置了 file-loader、url-loader、raw-loader, 可以直接通過(guò)配置實(shí)現(xiàn)常用功能,下面就來(lái)介紹一下webpack5處理圖片、圖標(biāo)字體、多媒體等靜態(tài)資源文件的實(shí)現(xiàn)方法,感興趣的可以了解一下2023-12-12javascript實(shí)現(xiàn)貪吃蛇經(jīng)典游戲
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)貪吃蛇經(jīng)典游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04用js實(shí)現(xiàn)的自定義的對(duì)話框的實(shí)現(xiàn)代碼
javascript alert函數(shù)的替代方案,一個(gè)自定義的對(duì)話框的方法2010-03-03微信小程序movable view移動(dòng)圖片和雙指縮放實(shí)例代碼
movable-area是微信小程序的新組件,可以用來(lái)移動(dòng)視圖區(qū)域movable-view。這篇文章主要介紹了微信小程序movable view移動(dòng)圖片和雙指縮放實(shí)例代碼,需要的朋友可以參考下2017-08-08JavaScript日期時(shí)間格式化函數(shù)分享
這篇文章主要介紹了JavaScript日期時(shí)間格式化函數(shù)分享,需要的朋友可以參考下2014-05-05Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法
這篇文章主要介紹了Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06