小程序自定义弹框的方法

本文实例为大家分享了小程序自定义弹框的具体代码,供大家参考,具体内容如下

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、页面呈现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 微信小程序开发实现首页弹框活动引导功能
  • 小程序自定义弹框效果
  • 微信小程序实现自定义动画弹框/提示框的方法实例
  • 微信小程序实现弹框效果
  • 微信小程序之几种常见的弹框提示信息实现详解
  • 微信小程序开发之实现自定义Toast弹框
  • 微信小程序开发之toast等弹框提示使用教程
  • 微信小程序 弹框和模态框实现代码
  • 微信小程序 modal弹框组件详解
张贴在2