小程序開(kāi)發(fā)?page-container?頁(yè)面容器彈出對(duì)話框功能的實(shí)現(xiàn)

更新時(shí)間：2022年08月08日 14:24:15 作者：觀心靜

這篇文章主要介紹了小程序開(kāi)發(fā)?page-container?頁(yè)面容器，彈出對(duì)話框,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

小程序彈窗對(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: