Requirements: Users can directly edit the user name after clicking the user name, save it and update it in real time.

The effect is as follows:

Initial state:

Click to enter editing mode:

Basic implementation ideas:

Use WXML conditional rendering template, bind bindtap event, conditionally reverse render input node after click nickname, bind BindConfirm event to input, render the final data to the front end, if necessary, call back-end API write database.

1. Basic page structure

 <view class="name" style="font-size:40rpx" >
          <view wx:if="{{! isNameEdit}}">{{nickName}}({{name}})<icon class="iconfont icon-bianji" style="margin-bottom:10rpx"></icon></view>
          <input placeholder="Please enter a new nickname." style="border-bottom:1rpx solid gray; box-shadow:#90BA76; color:gray; font-size:40rpx" type="text" wx:if="{{isNameEdit}}" bindconfirm="nameEditConfirm"/>
        </view>
Copy the code

Description:

  • The isNameEdit variable that monitors whether it is clicked and whether it needs to be displayedinputElement with an initial value offalse;
  • forviewNode binding click event handler function;
  • forinputNode binding confirms click event handler;

2. Js logic

Define variables:

data : {
    isNameEdit:false.nickName:' '
}
Copy the code

Bind events:

/ / bindtap event
editNickName:function(e) {
    this.setData({
      isNameEdit:true})}Copy the code
nameEditConfirm:function(e) {
    app.globalData.nickName = newName;
    this.setData({
      isNameEdit:false.nickName:e.detail.value
    })
  }
Copy the code

Done!