第一步：點擊按鈕觸發彈窗事件

<button?class="btn"?bindtap="btn">按鈕</button>

*** css樣式

.btn{

????position:?fixed;

????bottom:?0;

????left:?0;

}

*** js

btn(){

????let?delshow?=?!this.data.delshow

????console.log(delshow)

????this.setData({

??????delshow

????})

??},

第二步：設置彈窗的寬高為100%

??<view?class="message"?wx:if="{{delshow}}"?bindtap="print"></view>

*** css樣式

.message{

????height:?100%;

????width:?100%;

????background-color:?rgba(0,?0,?0,?0.3);

? ? position:?fixed;

????top:?0;

????z-index:?30;

}

*** js

print(){

????this.setData({

??????delshow?:?false

????})

??},

第三步：給內容的彈窗設置樣式。

<view?class="msg?{{delshow???'box'?:?''}}"> 彈窗中的內容 </view>

.container?.msg{

????height:?0;

????width:?100%;

????background-color:?#fff;

????position:?fixed;

????z-index:?40;

????bottom:?0;

????overflow:?hidden;

????transition:?all?0.3s;

????z-index:?30;

}

//彈窗內容

.container?.box{

????height:?1000rpx;

}

最后：微信小程序簡單的彈窗功能實現了。

總結

以上是生活随笔為你收集整理的微信小程序---实现弹窗效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。