我的想法是点击头像的时候弹出编辑框进行修改数据,所以就有了以下的内容;
这个是我点击头像的时候弹出的修改框的效果图;代码如下;
<span class="item-data">
<i bindtap="modalinput">
<image class="userinfo-avatar" src="{{userInfo.picture}}"></image>
</i>
</span>
这里我使用了span标签包着,用i标签进行点击事件。
<modal hidden="{{hiddenmodalput}}" title="修改个人信息" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
<view> <text style="color:blue">昵称:</text> <input type='text'placeholder="请输入内容" auto-focus/></view>
<view><text style="color:blue">省份:</text> <input type='text'placeholder="请输入内容" auto-focus/></view>
<view><text style="color:blue">省份:</text> <input type='text'placeholder="请输入内容" auto-focus/></view>
<view><text style="color:blue">城市:</text> <input type='text'placeholder="请输入内容" auto-focus/></view>
<view><text style="color:blue">城市:</text> <input type='text'placeholder="请输入内容" auto-focus/></view>
<view><text style="color:blue">性别:</text> <input type='text'placeholder="请选择性别" auto-focus/></view>
<view><text style="color:blue">个性签名:</text> <input type='text'placeholder="请编辑个性签名" auto-focus/></view>
</modal>
这个是编辑框的内容的,这个可以放在最外面,我的是放在最外面,不影响,
接下来就是在js那里进行添加逻辑了;
data: {
userInfo: null,
hidden:false,
hiddenmodalput: true,
//可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
},
modalinput: function () {
this.setData({
hiddenmodalput: !this.data.hiddenmodalput
})
},
//取消按钮
cancel: function () {
this.setData({
hiddenmodalput: true
});
},
//确认
confirm: function () {
this.setData({
hiddenmodalput: true
})
},
onChangeShowState: function () {
var that = this;
that.setData({
showView: (!that.data.showView)
})
},
// 弹框
powerDrawer: function (e) {
var currentStatu = e.currentTarget.dataset.statu;
console.log(currentStatu);
this.util(currentStatu)
},
util: function (currentStatu) {
/* 动画部分 */
// 第1步:创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
})
// 第2步:这个动画实例赋给当前的动画实例
this.animation = animation;
// 第3步:执行第一组动画
animation.opacity(0).rotateX(-100).step();
// 第4步:导出动画对象赋给数据对象储存
this.setData({
animationData: animation.export()
})
// 第5步:设置定时器到指定时候后,执行第二组动画
setTimeout(function () {
// 执行第二组动画
animation.opacity(1).rotateX(0).step();
// 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
this.setData({
animationData: animation
})
//关闭
if (currentStatu == "close") {
this.setData({
showModalStatus: false
});
wx.showToast({
title: '添加成功',
icon: 'succes',
duration: 1000,
mask: true
})
}
}.bind(this), 200)
// 显示
if (currentStatu == "open") {
this.setData({
showModalStatus: true
});
}
},
这个不需要写在生命周期函数,这样就可以实现了我第一张图的效果了,至于你的编辑框你要做成多好看,就看你自己了。