小程序开发之问题8:页面点击弹出框编辑

这里是常用的编辑个人信息的demo:

这是一个编辑手机号的弹出框

这是小程序页面html部分

 <view class='list_item bottom' bindtap='editPhone'>
    <view class='item_label'>手机号码</view>
    <view class='item_value'>{{phoneNum}}
    </view>
    <view class='icon_box'>
      <image src="../../images/icon_arrow_r.png" style="width:28rpx;height:28rpx"></image>
    </view>
  </view>
//弹出框部分
<view class='pop_bg' hidden='{{!isEdit}}'>
<form>
  <view class='pop_box'>
    <view class='title'>
      手机号码
    </view>
    <input placeholder-class='inputholder' placeholder="{{phoneNum}}" bindinput='blurPhone' maxlength='11'></input>
    <view class='btn_box'>
      <view class='btn_cancel' bindtap='editPhone'>
        取消
      </view>
      <view class='btn_sub' bindtap='formSubmit'>
        确定
      </view>
    </view>
  </view>
  </form>
</view>

这里是弹出框样式部分,根据个人需求来

.pop_bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 66;
}

.pop_box {
  width: 630rpx;
  background: #fff;
  padding-top: 40rpx;
  position: absolute;
  left: 60rpx;
  top: 200rpx;
  border-radius: 10rpx;
  color: #333;
}

.pop_box .title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  text-align: center;
}

.pop_box input {
  border: 1rpx solid #bfbfbf;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 10rpx;
  padding-left: 20rpx;
  margin: 40rpx;
    text-align: center;
}

.inputholder {
  color: #a9a9a9;
  text-align: center;
}

.btn_box {
  display: flex;
  justify-content: space-around;
  border-top: 1rpx solid #efeff4;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
}

.btn_cancel {
  flex: 1;
  text-align: center;
  border-right: 1rpx solid #efeff4;
}

.btn_sub {
  flex: 1;
  text-align: center;
  color: #1aad19;
}

这部分是弹出框实现方法部分

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isEdit: false, //手机号modal
    ajxtrue: false, //手机号验证
    phoneNum: '15557888288'
  },
  editPhone() {
    this.setData({
      isEdit: !this.data.isEdit
    })
  },

  // 手机号验证
  blurPhone: function(e) {
    var phone = e.detail.value;
    let that = this
    if (!(/^1[34578]\d{9}$/.test(phone))) {
      this.setData({
        ajxtrue: false
      })
      if (phone.length >= 11) {
        wx.showToast({
          title: '手机号有误',
          icon: 'success',
          duration: 1000
        })
      }
    } else {
      this.setData({
        ajxtrue: true
      })
      console.log('验证成功', that.data.ajxtrue)
    }
  },
 
  // 表单提交
  formSubmit(e) {
    let that = this
    let val = e.detail.value
    let ajxtrue = this.data.ajxtrue
    if (ajxtrue == true) {
      that.setData({
        phoneNum: val,
        isEdit: false
      })
    } else {
      wx.showToast({
        title: '手机号有误',
        icon: 'success',
        duration: 2000
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    //获得modal组件
    this.modal = this.selectComponent("#modal");
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

效果图如下:

有问题,留言哦~~~~,(#^.^#)