小程序自定義彈框的方法

更新時間：2022年06月24日 15:54:06 作者：那些年的筆記

這篇文章主要為大家詳細介紹了小程序自定義彈框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序自定義彈框的具體代碼，供大家參考，具體內(nèi)容如下

1、頁面簡單布局

<button bindtap='ElasticFrameClick'>彈框</button>
<view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view>
<view wx:if="{{showModal}}">
? <view class="modal-content">
? ? <view class='modal_title'>添加備注</view>
? ? <view class='modal_textarea'>
? ? ? <textarea placeholder='備注' maxlength='-1'></textarea>
? ? </view>
? ? <view class='btn'bindtap='hideModal'>保存</view>
? </view>
</view>

2、樣式設置

/* 遮蓋層 */
?
.modal-mask {
? width: 100%;
? height: 100%;
? position: fixed;
? top: 0;
? left: 0;
? background: #000;
? opacity: 0.5;
? overflow: hidden;
? z-index: 9000;
? color: #fff;
}
?
/* 白色背景 */
?
.modal-content {
? position: fixed;
? top: 120rpx;
? left: 75rpx;
? z-index: 9500;
? width: 600rpx;
? height: 720rpx;
? overflow: hidden;
? background: #fff;
? border-radius: 20rpx;
}
?
.modal_title {
? height: 96rpx;
? width: 100%;
? line-height: 96rpx;
? border-top-right-radius: 20rpx;
? border-top-left-radius: 20rpx;
? background-color: #5a94ff;
? color: #fff;
? text-align: center;
}
?
.modal_textarea {
? height: 395rpx;
? width: calc(100% - 40rpx);
? margin: 20rpx;
}
?
.modal_textarea textarea {
? height: 100%;
? width: 100%;
}
?
.btn{
? height: 70rpx;
? width: 390rpx;
? background-color: #5a94ff;
? color: #fff;
? text-align: center;
? line-height: 70rpx;
? border-radius: 50rpx;
? margin: 0 auto;
? margin-top: 40rpx;
}

3、js控制

Page({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? showModal: false,
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {
?
? },
? ElasticFrameClick: function() {
? ? this.setData({
? ? ? showModal: true
? ? })
? },
?
? toShowModal(e) {
? ? this.setData({
? ? ? showModal: true
? ? })
? },
?
? // 隱藏彈框
? hideModal() {
? ? this.setData({
? ? ? showModal: false
? ? });
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function() {
?
? },
?
? /**
? ?* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function() {
?
? },
?
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function() {
?
? },
?
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function() {
?
? }
})

4、頁面呈現(xiàn)