微信小程序之弹窗功能

一、效果演示

二、源代码

update_userinfo.wxml

<!--pages/update_userinfo/update_userinfo.wxml-->
<!-- 弹窗功能（用于确认个人信息） -->
  <!-- 遮罩层 -->
<form bindsubmit="formSubmit">
  <view wx:if="{{isShow}}" class='cover'>
    <!-- 可在此按需求自定义遮罩 -->
    <view style="position: relative;">
      <view class='cover_child'>
      <!-- 信息输入界面 -->
        <text class="child-title">学生证信息核对</text>
        <input class="weui-input" name="name" type="name" placeholder="姓名" bindinput="bindKeyInput" value = "{{student_info.name}}" />
        <input class="weui-input" name="ID" type="ID" placeholder="学号" bindinput="bindKeyInput" value = "{{student_info.ID}}" />
        <input class="weui-input" name="college" type="college" placeholder="学院" bindinput="bindKeyInput" value = "{{student_info.college}}" />
        <input class="weui-input" name="major" type="major" placeholder="专业班级" bindinput="bindKeyInput" value = "{{student_info.major}}" />
      </view>
      <!-- 取消、确定按钮 -->
      <view class='btn-group'>
        <view class="cancel" catchtap="hideCover" style="color: #5A6B8F;">取消</view>
        <button class="checkStudentInfo" style="color: #5A6B8F;" hover-class="wehx-button_hover" form-type='submit'>确定</button>
    </view>
  </view>
</view>
</form>

update_userinfo.wxss

/* pages/update_userinfo/update_userinfo.wxss */
.page{
  width: 100%;
  height: 100vh;
  background-color: rgb(233, 252, 231);
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 20rpx;
}

.btn-group {
  position: absolute;
  left: 70rpx;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-weight: bold;
  padding: 20rpx 0;
}
.btn-group .cancel{
  padding-top: 25rpx;
  padding-bottom: 25rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background: rgb(248,248,248);
  border: 2px solid rgb(224,224,224);
  border-radius: 10%;
}
.weui-input {
  background-color: #f1f1f1;
  border-radius: 10rpx;
  width: 400rpx;
  padding: 16rpx 16rpx;
}

.cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.cover_child {
  width: 550rpx;
  height: 700rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  border:solid 5rpx rgb(241,241,241);
}

.child-title {
  white-space: nowrap;
  margin-top: 60rpx;
  height: 32rpx;
  font-size: 34rpx;
  font-weight: bold;
  color: #333333;
  line-height: 36rpx;
  margin-bottom: 31rpx;
}

.cross {
  margin-bottom: 110rpx;
  bottom: 0rpx;
  position: fixed;
  width: 60rpx;
  height: 60rpx;
  z-index: 5;
}
.weui-input{
  margin-top: 20rpx;
  height: 60rpx;
}

update_userinfo.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // student_info用于存储弹框中输入的信息
    student_info:{},
    // isShow用于控制弹窗的显示与否 默认显示弹窗
    isShow:true
  },
  //实时获取弹窗的输入的值
  bindKeyInput(e) {
    console.log(e.detail.value)
  },

  // 隐藏弹窗函数
  hideCover(){
    this.setData({
      isShow: false
    })
  },

  // 展示弹窗函数
  showCover(){
    this.setData({
      isShow:true
    })
  },
  // 点击确定后的事件处理 获取确认后的用户信息 并作出相应的处理
  formSubmit: function (e) {
    console.log(e.detail.value)
    // 获取输入的姓名
    let name = e.detail.value.name;
    // 获取输入的学号
    let ID = e.detail.value.ID;
    // 获取输入的学院
    let college = e.detail.value.college;
    // 获取输入的专业班级
    let major = e.detail.value.major;
    // console.log(name+ID+college+major);
    this.setData({
      student_info:{name:name,ID:ID,college:college,major:major}
    })
    // 将student_info保存至本地缓存
    wx.setStorageSync('student_info', this.data.student_info)
    // 隐藏弹窗
    this.hideCover()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

三、项目demo地址

项目的github地址点击跳转，欢迎各位浏览和star✨。

四、参考链接

1.本项目相当于是对博客微信小程序原生自定义弹窗的实现。
2.微信小程序之 获取input框输入值
3.微信小程序实现授权登录之获取用户信息