小程序開發(fā)?page-container?頁面容器彈出對話框功能的實現(xiàn)
更新時間：2022年08月08日 14:24:15 作者：觀心靜
這篇文章主要介紹了小程序開發(fā)?page-container?頁面容器，彈出對話框,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言
小程序彈窗對話框實現(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ù)：
屬性 類型 默認值 必填 說明
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 否 是否在下滑一段距離后關閉
overlay-style string 否 自定義遮罩層樣式
custom-style string 否 自定義彈出層樣式
bind:beforeenter eventhandle 否 進入前觸發(fā)
bind:enter eventhandle 否 進入中觸發(fā)
bind:afterenter eventhandle 否 進入后觸發(fā)
bind:beforeleave eventhandle 否 離開前觸發(fā)
bind:leave eventhandle 否 離開中觸發(fā)
bind:afterleave eventhandle 否 離開后觸發(fā)
bind:clickoverlay eventhandle 否 點擊遮罩層時觸發(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;">標題</text>
<text style="text-align: center; padding-top: 20%; padding-bottom: 20%; background-color: aqua; ">內容</text>
<button bindtap="exitBtn" style="width: 100%; background-color: grey;" >退出</button>
</view>
</page-container>.wxss
/* pages/demo2/demo2.wxss */
page{
background:tan;
}到此這篇關于小程序開發(fā) page-container 頁面容器，彈出對話框的文章就介紹到這了,更多相關小程序開發(fā)彈出對話框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解小程序云開發(fā)攻略(解決最棘手的問題)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
JS實現(xiàn)瀏覽器狀態(tài)欄文字閃爍效果的方法
這篇文章主要介紹了JS實現(xiàn)瀏覽器狀態(tài)欄文字閃爍效果的方法,通過時間函數(shù)定時觸發(fā)遞歸調用實現(xiàn)狀態(tài)欄文字閃爍效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
js實現(xiàn)的修改div里img標簽的src屬性...2007-09-09
這篇文章主要介紹了原生js實現(xiàn)的觀察者和訂閱者模式,結合簡單實例形式分析了js觀察者和訂閱者模式的相關原理與實現(xiàn)技巧,需要的朋友可以參考下2020-04-04
javascript使用正則控制input輸入框允許輸入的值方法大全
在做項目的時候，我們經(jīng)常會遇到控制input輸入框允許輸入的值為數(shù)字，字母，漢字或者混排的情況，那么我們怎么來處理呢，下面我們就來探討怎么通過用javascript正則來實現(xiàn)2014-06-06
一個JS翻頁效果...2007-07-07
這篇文章主要介紹了Js圖片點擊切換輪播實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
XDomainRequest之IE8和IE9發(fā)送跨域請求拒絕訪問解決方法
這篇文章主要介紹了XDomainRequest之IE8和IE9發(fā)送跨域請求拒絕訪問解決方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了webpack常用構建優(yōu)化策略小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了js實現(xiàn)div層緩慢收縮與展開的方法,通過javascript自定義函數(shù)實現(xiàn)div層的收縮與展開效果,非常具有實用價值,需要的朋友可以參考下2015-05-05