一兑牡、實(shí)現(xiàn)效果
最終實(shí)現(xiàn)效果圖
二、思考實(shí)現(xiàn)
1.點(diǎn)擊字符串翻轉(zhuǎn)
第一步
- 定義變量name硬耍，內(nèi)容為"Simba"（內(nèi)容可根據(jù)需要隨意填寫边酒，此處主要用于測試效果）
data: {
name: "Simba",
},
第二步
- 頁面添加<text > </text>標(biāo)簽墩朦，綁定name,
點(diǎn)擊bindtaptext標(biāo)簽觸發(fā)事件函數(shù)change,使字符翻轉(zhuǎn)
bindtap,當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)
<text bindtap='change'>{{name}}</text>
第三步
- change實(shí)現(xiàn)
（1）實(shí)現(xiàn)翻轉(zhuǎn)可以用到reverse()方法，但是此方法是數(shù)組方法牛哺，所以先將name轉(zhuǎn)換為數(shù)組劳吠，用split()方法；
reverse() 方法用于顛倒數(shù)組中元素的順序淳附。
split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組蠢古。
（2）翻轉(zhuǎn)之后name改變?yōu)榱藬?shù)組，頁面需要完整顯示字符串洽糟，使用join()方法;
join() 方法用于把數(shù)組中的所有元素放入一個(gè)字符串。
(3) 更改以后需要同時(shí)更新拍霜，使用setData()
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步）薪介，同時(shí)改變對應(yīng)的 this.data 的值（同步）
change() {
// this指當(dāng)前頁面的對象
var str = this.data.name.split('').reverse().join('')
this.setData({
name: str
})
},
2.列表實(shí)時(shí)添加
思路
- input
value為空，當(dāng)輸入內(nèi)容點(diǎn)擊添加按鈕，內(nèi)容添加進(jìn)數(shù)組userlist中進(jìn)行實(shí)時(shí)顯示
變化的是input的value和userlistname的值烂完，而value和name值一致诵棵，需要定義一個(gè)變量nickname讓它們保持一致
第一步
- 定義
nickname,初始值為空
- 定義數(shù)組
userlist，每個(gè)元素為對象嘶窄，存放id,name
data: {
nickname: "",
userlist: [{
id: 1001,
name: "Simba"
}, {
id: 1002,
name: "ACE"
}, {
id: 1003,
name: "rogin"
}, {
id: 1004,
name: "rr"
}]
},
第二步
- 搭建顯示頁面距贷，使用
wx:for控制屬性綁定一個(gè)數(shù)組- 添加input 文本框,文本框value='
{{nickname}}'忠蝗，輸入內(nèi)容時(shí)nickname的值同時(shí)改變，需要定義一個(gè)觸發(fā)事件函數(shù)setnickname
bindinput,鍵盤輸入時(shí)觸發(fā)- 添加button按鈕,點(diǎn)擊按鈕是觸發(fā)事件函數(shù)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:時(shí)實(shí)更新
nickname的值
setnickname(e) {
// 將nickname的值更新為input的value
this.data.nickname = e.detail.value
},
- add:
增強(qiáng)交互性戒祠，當(dāng)inputvalue為空速种，提醒用戶輸入并返回false:
增加userlist的值，其中name的值===nickname的值馏颂；
添加之后需要更新userlist并讓input的value為空闸餐，所以需要再次改變nickname的值
add() {
// 當(dāng)nickname的值為空時(shí)，不執(zhí)行后面的代碼
if (!this.data.nickname) {
wx.showToast({
title: '不能為空哦近上！',
icon: "none",
duration: 1000
})
return false
}
// 往userlist中添加元素
this.data.userlist.push({
id: 1005,
name: this.data.nickname
})
// 時(shí)時(shí)更新userlist的值拂铡，并將nickname的值為空(因?yàn)閕nput的值為nickname的值)
this.setData({
userlist: this.data.userlist,
nickname: ''
})
},
