小程序自定义弹框的方法
作者:那些年的笔记
这篇文章主要为大家详细介绍了小程序自定义弹框的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序自定义弹框的具体代码,供大家参考,具体内容如下
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、页面呈现
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。