这里是常用的编辑个人信息的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() {
}
})
效果图如下:
有问题,留言哦~~~~,(#^.^#)