小程序修改名称功能显示隐藏实现

1.wxml中用wx：if 控制显示隐藏

<view class="over" wx:if="{{!shows}}">
	<text class="fl">{{personalInfo.userName}}</text>
	<text class="edit" bindtap="edit">修改</text>
</view>
<view class="over"  wx:if="{{shows}}">
	<input class="inp" type="text" bindinput="naemInput"  value="{{personalInfo.userName}}"></input>
	<text class="edit" style="line-height:50rpx;" bindtap="save">确定</text>
</view>

2.js动态控制并修改

Page({
  data: {
    shows: false,
    name:''
  },  
  //获取持续时间
  naemInput: function (e) {
    var that = this;
    this.setData({
      name: e.detail.value
    })
    console.log(that.data.name)
  },
  // 修改
  edit(){
    var that = this;
    var sh = that.data.shows;
    that.setData({
      shows: !sh
    })
  },
  // 保存
  save(){
    var that = this;
	wx.request({
		url: `你的地址`,
		method: "GET",
		header: {
			"Content-Type": "application/json"
		},
		data: {
			nickName: that.data.name
		},
		success: (res) => {
			console.log(res)
		    that.setData({
	        	shows: false
	      	})    
		}
})