小程序实现点击弹出编辑框

我的想法是点击头像的时候弹出编辑框进行修改数据，所以就有了以下的内容;

这个是我点击头像的时候弹出的修改框的效果图；代码如下;

 <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
      });
    }
  },

这个不需要写在生命周期函数，这样就可以实现了我第一张图的效果了，至于你的编辑框你要做成多好看，就看你自己了。