小程序点击字符串翻转，列表实时添加

一、实现效果

最终实现效果图

二、思考实现
1.点击字符串翻转

第一步

• 定义变量name，内容为"Simba"（内容可根据需要随意填写，此处主要用于测试效果）

data: {
    name: "Simba",
  },

第二步

• 页面添加<text > </text>标签，绑定name,
  点击bindtaptext标签触发事件函数change,使字符翻转
  bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

<text bindtap='change'>{{name}}</text>

第三步

• change实现
  （1）实现翻转可以用到reverse()方法，但是此方法是数组方法，所以先将name转换为数组，用split()方法；
  reverse() 方法用于颠倒数组中元素的顺序。
split() 方法用于把一个字符串分割成字符串数组。
  （2）翻转之后name改变为了数组，页面需要完整显示字符串，使用join()方法;
  join() 方法用于把数组中的所有元素放入一个字符串。
  (3) 更改以后需要同时更新，使用setData()
  setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

change() {
    // this指当前页面的对象
    var str = this.data.name.split('').reverse().join('')
    this.setData({
      name: str
    })
  },

2.列表实时添加

思路

• input value为空，当输入内容点击添加按钮，内容添加进数组userlist中进行实时显示
  变化的是input的value和userlist name的值，而value和name值一致，需要定义一个变量nickname让它们保持一致

第一步

• 定义nickname,初始值为空

• 定义数组userlist，每个元素为对象，存放id,name

  data: {
    nickname: "",
    userlist: [{
      id: 1001,
      name: "Simba"
    }, {
      id: 1002,
      name: "ACE"
    }, {
      id: 1003,
      name: "rogin"
    }, {
      id: 1004,
      name: "rr"
    }]
  },

第二步

• 搭建显示页面，使用 wx:for控制属性绑定一个数组
• 添加input 文本框,文本框value='{{nickname}}'，输入内容时nickname的值同时改变，需要定义一个触发事件函数setnickname
  bindinput,键盘输入时触发
• 添加button按钮,点击按钮是触发事件函数add

<view wx:for="{{userlist}}">
  <view style='color:{{index%2===0?"red":"green"}}'>{{index+1}}---{{item.name}}</view>
</view>
<input style='border:1px solid red;'   value='{{nickname}}'   bindinput='setnickname'></input>
<button bindtap='add'>添加</button>

第三步

• setnickname:时实更新nickname的值

  setnickname(e) {
    // 将nickname的值更新为input的value
    this.data.nickname = e.detail.value
  },

• add:
  增强交互性，当inputvalue为空，提醒用户输入并返回false:
  增加userlist的值，其中name的值===nickname的值；
  添加之后需要更新userlist并让input的value为空，所以需要再次改变nickname的值

  add() {
    // 当nickname的值为空时，不执行后面的代码
    if (!this.data.nickname) {
      wx.showToast({
        title: '不能为空哦！',
        icon: "none",
        duration: 1000
      })
      return false
    }
    // 往userlist中添加元素
    this.data.userlist.push({
      id: 1005,
      name: this.data.nickname
    })
    // 时时更新userlist的值，并将nickname的值为空(因为input的值为nickname的值)
    this.setData({
      userlist: this.data.userlist,
      nickname: ''
    })
  },