效果顯示
todo-list.gif
幾個(gè)技能點(diǎn)
- 點(diǎn)擊view切換可編輯狀態(tài)的input排惨，回車(chē)后运准，要回到文本模式
- 將bindtap改為catchtap幌氮，阻止與checkbox沖突
- 注意sort()函數(shù)的坑，是按字符ascii排序胁澳，而非數(shù)值大小该互，所以要傳遞sort()排序回調(diào)方法
代碼
代碼里有詳情的注釋?zhuān)暾a托管在git，https://gitee.com/laeser/demo-weapp
)
JS文件
Page({
data: {
todos: [
{
title: '明天9點(diǎn)打電話給老張'
},
{
title: '打電話給老王'
},
{
title: '打電話'
}
]
},
onLoad() {
// 調(diào)用模擬數(shù)據(jù)代碼韭畸，需要時(shí)打開(kāi)下面的注釋
// this.mock()
},
// 模擬長(zhǎng)列表數(shù)據(jù)源
mock() {
// 生成12行數(shù)據(jù)宇智，看底部刪除按鈕是否正常
const todos = []
for (let index = 0; index < 12; index++) {
todos.push({
title: index
})
}
// 保存數(shù)據(jù)源
this.setData({
todos: todos
})
},
add(e) {
// 獲取文本框里的內(nèi)容
const title = e.detail.value
// 如果文本為空，給出toast提示
if (!title) {
wx.showToast({
title: '請(qǐng)輸入內(nèi)容'
})
return
}
// 獲取原來(lái)數(shù)據(jù)源
let todos = this.data.todos
// 構(gòu)建todo對(duì)象
let todo = {
title: title
}
// 向數(shù)組最后添加一個(gè)元素
todos.push(todo)
// 保存數(shù)據(jù)源
this.setData({
todos: todos,
title: ''
})
},
editing(e) {
// 獲取當(dāng)時(shí)點(diǎn)擊的是第n個(gè)元素
const index = e.currentTarget.dataset.index
// 設(shè)定currentIndex值胰丁，讓當(dāng)前的文本框高亮
this.setData({
currentIndex: index
})
},
edit(e) {
// 獲取input組件上的取值
const title = e.detail.value
// 設(shè)定currentIndex值随橘，改變它的聚會(huì)
const index = e.currentTarget.dataset.index
// 獲取原來(lái)數(shù)據(jù)源
let todos = this.data.todos
// 修改當(dāng)前元素的title值
todos[index].title = title
// 保存數(shù)據(jù)源
this.setData({
todos: todos,
currentIndex: -1
})
},
// 勾選事件
checkboxChange(e) {
// 取出當(dāng)前復(fù)選框的值
const values = e.detail.value
// 保存數(shù)據(jù)源
this.setData({
checkIndices: values
})
},
// 批量刪除
deleteAll() {
const checkIndices = this.data.checkIndices
// 判斷是不是數(shù)組，并且元素個(gè)數(shù)大于1
if (Array.isArray(checkIndices) && checkIndices.length > 0) {
// 刪除確認(rèn)
wx.showModal({
title: '確定刪除嗎锦庸？',
success: ({ confirm }) => {
if (confirm) {
// 從后往前遍歷机蔗，不會(huì)造成index錯(cuò)亂
let todos = this.data.todos
for (let i = checkIndices.length - 1; i >= 0; i--) {}
// 注意sort原生是按string的ascii排序，會(huì)造成1,11，2這樣一系列數(shù)據(jù)排序不合預(yù)期
checkIndices
.sort((a, b) => {
return a - b
})
.reverse()
// 逆序后就可以逐一刪除元素
checkIndices.forEach(item => {
todos.splice(item, 1)
})
// 保存數(shù)據(jù)源萝嘁，同時(shí)checkIndices將它復(fù)位
this.setData({
todos: todos,
checkIndices: []
})
// 給出提示框
wx.showToast({
title: '刪除成功'
})
}
}
})
} else {
wx.showToast({
title: '請(qǐng)先勾選'
})
}
},
// 失去焦點(diǎn)事件
bindblur(e) {
// 列表中的文本框失去焦點(diǎn)時(shí)梆掸，currentIndex復(fù)位，讓它們?nèi)炕氐轿锤吡恋臓顟B(tài)
this.setData({
currentIndex: -1
})
}
})
wxml文件
<!-- 操作區(qū)域主體內(nèi)容 -->
<view class="main">
<input type="text" name="title" value="{{title}}" class="add" placeholder="請(qǐng)輸入記錄內(nèi)容" confirm-type="done" placeholder-class="input-placeholder" auto-focus bindconfirm="add" />
<!-- 使用checkbox-group作為容器牙言，方便勾選 -->
<checkbox-group bindchange="checkboxChange">
<!-- 遍歷數(shù)據(jù)源 -->
<label wx:for="{{todos}}" class="list" wx:key="">
<!-- 復(fù)選按鈕酸钦，取值就是index值，回傳checkbox改變事件回調(diào) -->
<checkbox value="{{index}}" checked="{{item.checked}}" />
<!-- 文本框咱枉，由于currentIndex的存在而具有高亮狀態(tài) -->
<input name="editor" catchtap="editing" data-index="{{index}}" value="{{item.title}}" disabled="{{currentIndex !== index}}" focus="{{currentIndex === index}}" class="input-common {{currentIndex !== index ? 'input-disabled' : 'input-enabled'}}" bindconfirm="edit" bindblur="bindblur" />
</label>
</checkbox-group>
</view>
<!-- 刪除按鈕容器 -->
<view class="delete-container">
<button type="warn" class="delete-all" bindtap="deleteAll">刪除</button>
</view>
wxss文件
/* 主體區(qū)域的樣式卑硫，設(shè)定內(nèi)外邊距 */
.main {
padding: 0 10px;
margin-top: 10px;
margin-bottom: 60px;
}
/* 文本框通用樣式 */
input {
color: #666;
border: 1px solid #999;
border-radius: 4px;
padding: 6px;
}
/* 文本框placeholder占位字符的樣式 */
input.input-placeholder {
color: #999;
}
/* 頁(yè)首添加用文本框背景色 */
.add {
background-color: white;
}
/* 文本內(nèi)容的flex布局 */
.list {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 5px 0;
}
/* 不論高亮與否都需要具備的樣式 */
.input-common {
color: #000;
flex: 1;
}
/* 非高亮?xí)r的樣式 */
.input-disabled {
border: 1px solid #F8F8F8
}
/* 高亮?xí)r的樣式 */
.input-enabled {
background: white;
}
view.delete-container {
z-index: 99;
position: fixed;
bottom: 0;
left: 0;
right: 0px;
width: 100%;
text-align: center;
background-color: #F8F8F8;
}
button.delete-all {
margin: 10px;
}
關(guān)注我
歡迎關(guān)注訂閱號(hào)【黃秀杰】
mp
