一、实现效果
最终实现效果图
二、思考实现
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和userlistname的值，而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: ''
})
},
