小程序開發(fā)?page-container?頁面容器彈出對話框功能的實(shí)現(xiàn)
前言
小程序彈窗對話框?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">顯示對話框</button>
<!--
page-container 的參數(shù):
屬性 類型 默認(rèn)值 必填 說明
show boolean false 否 是否顯示容器組件
duration number 300 否 動畫時長,單位毫秒
z-index number 100 否 z-index 層級
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 否 離開前觸發(fā)
bind:leave eventhandle 否 離開中觸發(fā)
bind:afterleave eventhandle 否 離開后觸發(fā)
bind:clickoverlay eventhandle 否 點(diǎn)擊遮罩層時觸發(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)于小程序開發(fā) page-container 頁面容器,彈出對話框的文章就介紹到這了,更多相關(guān)小程序開發(fā)彈出對話框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字閃爍效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字閃爍效果的方法,通過時間函數(shù)定時觸發(fā)遞歸調(diào)用實(shí)現(xiàn)狀態(tài)欄文字閃爍效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
js實(shí)現(xiàn)的修改div里img標(biāo)簽的src屬性
js實(shí)現(xiàn)的修改div里img標(biāo)簽的src屬性...2007-09-09
原生js實(shí)現(xiàn)的觀察者和訂閱者模式簡單示例
這篇文章主要介紹了原生js實(shí)現(xiàn)的觀察者和訂閱者模式,結(jié)合簡單實(shí)例形式分析了js觀察者和訂閱者模式的相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
javascript使用正則控制input輸入框允許輸入的值方法大全
在做項(xiàng)目的時候,我們經(jīng)常會遇到控制input輸入框允許輸入的值為數(shù)字,字母,漢字或者混排的情況,那么我們怎么來處理呢,下面我們就來探討怎么通過用javascript正則來實(shí)現(xiàn)2014-06-06
Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼
這篇文章主要介紹了Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
XDomainRequest之IE8和IE9發(fā)送跨域請求拒絕訪問解決方法
這篇文章主要介紹了XDomainRequest之IE8和IE9發(fā)送跨域請求拒絕訪問解決方法,需要的朋友可以參考下2023-06-06
webpack常用構(gòu)建優(yōu)化策略小結(jié)
這篇文章主要介紹了webpack常用構(gòu)建優(yōu)化策略小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11

