青海网站 建设,光华路网站建设,南孚电池网站建设,网站改版建设原则目录JS 部分数据 dataonShow输入框双向绑定保存与读取添加新的待办事项完成待办事项删除待办事项WXML顶部输入框主体回到顶部按钮完整代码JSWXMLWXSSJS 部分 为便于分析各个组件的相互作用与原理#xff0c;故先从 JS 入手#xff0c;而后再完善 HTML 部分 以下所有代码…
目录JS 部分数据 dataonShow输入框双向绑定保存与读取添加新的待办事项完成待办事项删除待办事项WXML顶部输入框主体回到顶部按钮完整代码JSWXMLWXSSJS 部分 为便于分析各个组件的相互作用与原理故先从 JS 入手而后再完善 HTML 部分 以下所有代码除了 import 导包语句都写在 todo.js 的 Page({}) 对象内 数据 data
作为一款小而精的 todolist 小程序我们仅需下方五个属性即可解决所有代码逻辑
inputValue 双向绑定输入框内容todoList 当前的 todo 表currentUndo 当前未完成的待办事项数allComplete 事项是否全部完成isFocus 用于搜索框自动获取焦点
data: {inputValue: ,todoList: [],currentUndo: 0,allComplete: false,isFocus:false},onShow
由于我们没有在 app.json 中设置总标题故在每个页面打开后最好都在 onShow 钩子里面显式指定当前页面标题
// 进入此页面时自动设置好标题onShow: function () {wx.setNavigationBarTitle({title: Todo待办事项})},输入框双向绑定
由于微信小程序 功能太少太烂 特别是仅仅提供了单向绑定而不像 vue 还有 v-model 执行双向绑定
所有这里需要开发者自行实现双向绑定功能具体流程即监听输入框内容内容发生改变触发回调函数修改对应的值而通过单向绑定实现值的动态变化
// 输入框双向绑定处理inputChange(e) {this.setData({// e.detail.value可视为一种固定写法可以从input类型的组件获取其值inputValue: e.detail.value})},保存与读取
代码不难理解即我们需要在每次对 todo 进行增删后都自带保存数据到本地这样子下次开启小程序就可直接读取数据了
onLoad 回调保证页面加载时自动从内存读取 todolist 数据
// 保存todos到本地内存saveTodos() {wx.setStorageSync(todo_list, this.data.todoList)},// 加载todos列表loadTodos() {let todos wx.getStorageSync(todo_list)if (todos) {let undo todos.filter((item) {return !item.complete}).lengththis.setData({todoList: todos,currentUndo: undo})}console.log(todos);},// 页面加载钩子调用loadTodosonLoad() {this.loadTodos()},添加新的待办事项
添加新待办事项的代码逻辑
// 将新的待办事项添加到栏内addTodo() {// 如果编辑框文本为空或者仅有空格的话不予添加if (!this.data.inputValue || !this.data.inputValue.trim()) return// 每次都需要单独取出todolist然后push新的内容进去最后setdata你可以将其当做固定套路let todos this.data.todoListtodos.push({title: this.data.inputValue,complete: false})this.setData({inputValue: ,todoList: todos,currentUndo: this.data.currentUndo 1, // 添加新待办未完成数1isFocus:true // 添加完一个待办后自动令编辑框获得焦点省去客户重复点击过程})// 每次修改完毕都必须保存一下this.saveTodos()},完成待办事项
请注意此处 complete 状态的设置点击一次完成事项再点击一次取消完成变为待办此时就需要对 complete 做出判断以动态增减 currentUndo 的数值量
// 点击完成单个事项toggleTodo(e) {let index e.currentTarget.dataset.indexlet todos this.data.todoListtodos[index].complete !todos[index].completethis.setData({todoList: todos,currentUndo: this.data.currentUndo (todos[index].complete ? -1 : 1),})this.saveTodos()},// 选中全部的待办事项toggleAllTodos() {this.data.allComplete !this.data.allCompletelet todos this.data.todoListtodos.forEach(i {i.complete this.data.allComplete})this.setData({todoList: todos,currentUndo: this.data.allComplete ? 0 : todos.length})this.saveTodos()},删除待办事项
删除单个待办事项的方法为通过索引找到该 todo并使用 splice 删去之后更新数据即可
删除多个待办事项时需要配合 foreach 方法
// 删除单个待办事项removeTodo(e) {let index e.currentTarget.dataset.indexlet todos this.data.todoListlet remove todos.splice(index, 1)[0]this.setData({todoList: todos,currentUndo: this.data.currentUndo - (remove.complete ? 0 : 1)})this.saveTodos()},// 删除选中项removeTodos(e) {let todos this.data.todoListlet remain []todos.forEach(i {if (!i.complete) remain.push(i)})this.setData({todoList: remain})this.saveTodos()// wx自带的手机振动接口vibrateShort表示振动15mswx.vibrateShort()},WXML
顶部输入框
这里涉及到的 t-input 配置项可以自行前往官网查询 API这里不做过多解释 bind:change、bind:blur、bind:enter 分别表示 内容改变、是否获取焦点、按下回车键 后的回调函数
对于 t-button如果他在 t-input 内部则需使用 slotsuffix 指定插槽来安放该 button
!-- 顶部添加栏 --
view classtodo-inputt-inputvalue{{inputValue}}styleborder-radius: 12rpx;clearableplaceholder请输入事项名称confirm-typedonebind:changeinputChangebind:blurisFocus!isFocusbind:enteraddTodofocus{{isFocus}}t-buttonwx:if{{inputValue}}slotsuffixthemelightsizesmallbindtapaddTodo添加/t-button/t-input
/view主体
block 配以 wx:if实现状态页显示当待办事项列表为空时动态判断并显示 404 页面
!-- 当todo列表存在数据时渲染该页面 --
block wx:if{{todoList.length}}view classtodo-controlimage bindtaptoggleAllTodos src../../image/pages/all.png/imagetext wx:if{{currentUndo}}待完成任务 {{currentUndo}}/textimagebindtapremoveTodossrc../../image/pages/delete.pngwx:if{{todoList.lengthcurrentUndo}}/image/viewview classtodo-itemboxviewclasstodo-items {{item.complete?comp:}}wx:for{{todoList}}wx:keyindexdata-index{{index}}bindtaptoggleTodoiconclasscheckboxtype{{ item.complete ? success : circle }}/icontext classtitle{{ item.title }}/texticonclassremovetypeclearsize16catchtapremoveTododata-index {{index}} //view/view
/block!-- 当todo列表为空时渲染该页面 --
block wx:elseview classtodo-emptyimage src../../image/state/no-data.png/imageview stylecolor: gray;当前还没有待办事项哦~/view/view
/block回到顶部按钮
!-- 回到顶部悬浮按钮 --
!-- 判断当且仅当列表项多于6个时,才会显示该悬浮按钮 --
t-fab wx:if{{todoList.length6}} iconarrow-up bind:clickfabBack2Top /CSS 部分由于不方便表述故留到文末以源码的形式展现给大家 完整代码
JS
import Message from tdesign-miniprogram/message/index;// pages/todo/todo.js
Page({data: {inputValue: ,todoList: [],currentUndo: 0,allComplete: false,isFocus: false,},// 进入此页面时自动设置好标题onShow: function () {wx.setNavigationBarTitle({title: Todo待办事项,});},// 输入框双向绑定处理inputChange(e) {this.setData({inputValue: e.detail.value,});},// 保存todos到本地内存saveTodos() {wx.setStorageSync(todo_list, this.data.todoList);},// 加载todos列表loadTodos() {let todos wx.getStorageSync(todo_list);if (todos) {let undo todos.filter((item) {return !item.complete;}).length;this.setData({todoList: todos,currentUndo: undo,});}console.log(todos);},// 页面加载钩子调用loadTodosonLoad() {this.loadTodos();},// 将新的待办事项添加到栏内addTodo() {if (!this.data.inputValue || !this.data.inputValue.trim()) return;let todos this.data.todoList;todos.push({title: this.data.inputValue,complete: false,});this.setData({inputValue: ,todoList: todos,currentUndo: this.data.currentUndo 1,isFocus: true,});this.saveTodos();},// 悬浮按钮回到顶部fabBack2Top() {wx.pageScrollTo({duration: 500,scrollTop: 0,});},// 点击完成单个事项toggleTodo(e) {let index e.currentTarget.dataset.index;let todos this.data.todoList;todos[index].complete !todos[index].complete;this.setData({todoList: todos,currentUndo: this.data.currentUndo (todos[index].complete ? -1 : 1),});this.saveTodos();},// 选中全部的待办事项toggleAllTodos() {this.data.allComplete !this.data.allComplete;let todos this.data.todoList;todos.forEach((i) {i.complete this.data.allComplete;});this.setData({todoList: todos,currentUndo: this.data.allComplete ? 0 : todos.length,});this.saveTodos();},// 删除单个待办事项removeTodo(e) {let index e.currentTarget.dataset.index;let todos this.data.todoList;let remove todos.splice(index, 1)[0];this.setData({todoList: todos,currentUndo: this.data.currentUndo - (remove.complete ? 0 : 1),});this.saveTodos();},// 删除选中项removeTodos(e) {let todos this.data.todoList;let remain [];todos.forEach((i) {if (!i.complete) remain.push(i);});this.setData({todoList: remain,});if (this.data.currentUndo 0) {Message.success({context: this,content: 完成所有任务休息一下吧,duration: 2000,offset: [20, 32],closeBtn: true,});}this.saveTodos();wx.vibrateShort();},
});WXML
view classtodo-container!-- 顶部添加栏 --view classtodo-inputt-inputvalue{{inputValue}}styleborder-radius: 12rpx;clearableplaceholder请输入事项名称confirm-typedonebind:changeinputChangebind:blurisFocus!isFocusbind:enteraddTodofocus{{isFocus}}t-buttonwx:if{{inputValue}}slotsuffixthemelightsizesmallbindtapaddTodo添加/t-button/t-input/view!-- 当todo列表存在数据时渲染该页面 --block wx:if{{todoList.length}}view classtodo-controlimage bindtaptoggleAllTodos src../../image/pages/all.png/imagetext wx:if{{currentUndo}}待完成任务 {{currentUndo}}/textimagebindtapremoveTodossrc../../image/pages/delete.pngwx:if{{todoList.lengthcurrentUndo}}/image/viewview classtodo-itemboxviewclasstodo-items {{item.complete?comp:}}wx:for{{todoList}}wx:keyindexdata-index{{index}}bindtaptoggleTodoiconclasscheckboxtype{{ item.complete ? success : circle }}/icontext classtitle{{ item.title }}/texticonclassremovetypeclearsize16catchtapremoveTododata-index {{index}} //view/view/block!-- 当todo列表为空时渲染该页面 --block wx:elseview classtodo-emptyimage src../../image/state/no-data.png/imageview stylecolor: gray;当前还没有待办事项哦~/view/view/block!-- 回到顶部悬浮按钮 --!-- 判断当且仅当列表项多于6个时,才会显示该悬浮按钮 --t-fabwx:if{{todoList.length6}}iconarrow-upbind:clickfabBack2Top/
/viewWXSS
.todo-container {margin: 0;padding: 0;width: 100vw;min-height: 100vh;background-color: #ededed;display: flex;flex-direction: column;position: relative;
}.todo-input {margin: 12rpx 32rpx;display: flex;flex-direction: row;justify-content: space-between;
}.todo-empty {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;
}
.todo-empty image {width: 450rpx;height: 450rpx;
}/* 悬浮按钮 */
.fab {position: absolute;right: 0;bottom: 0;
}/* 多选操纵栏 */
.todo-control {display: flex;flex-direction: row;justify-content: space-between;align-items: center;height: 80rpx;margin: 12rpx 32rpx;
}
.todo-control image {height: 70rpx;width: 70rpx;
}/* todo项目展示 */
.todo-items {border-radius: 8rpx;height: 120rpx;background-color: white;margin: 10rpx 32rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}
.comp {background-color: lightgray;
}
.todo-items .checkbox {margin-left: 24rpx;
}
.todo-items .title {min-width: 70%;max-width: 70%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.todo-items .remove {margin-right: 24rpx;
}
