小程序自定義彈框的方法
本文實例為大傢分享瞭小程序自定義彈框的具體代碼，供大傢參考，具體內容如下
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({
/**
* 頁面的初始數據
*/
data: {
showModal: false,
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function(options) {
},
ElasticFrameClick: function() {
this.setData({
showModal: true
})
},
toShowModal(e) {
this.setData({
showModal: true
})
},
// 隱藏彈框
hideModal() {
this.setData({
showModal: false
});
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function() {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function() {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function() {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function() {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function() {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function() {
}
})
4、頁面呈現
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。