- Created `pages/list` for managing and displaying to-do tasks. - Created `pages/settings` as a placeholder for application settings. - Updated `pages/index` for a refreshed layout with navigation to "Tasks" and "Settings". - Integrated custom tab bar across all pages for seamless transitions.
63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
// pages/list/list.ts
|
|
interface ITodo {
|
|
text: string;
|
|
completed: boolean;
|
|
}
|
|
|
|
Component({
|
|
data: {
|
|
newTodoText: '',
|
|
todos: [] as ITodo[],
|
|
activeTab: 'list', // For tab bar
|
|
},
|
|
methods: {
|
|
onNewTodoInput(e: any) {
|
|
this.setData({
|
|
newTodoText: e.detail.value,
|
|
});
|
|
},
|
|
addTodo() {
|
|
const { newTodoText, todos } = this.data;
|
|
if (newTodoText.trim() === '') {
|
|
return;
|
|
}
|
|
const newTodos = [...todos, { text: newTodoText, completed: false }];
|
|
this.setData({
|
|
todos: newTodos,
|
|
newTodoText: '',
|
|
});
|
|
},
|
|
toggleTodo(e: any) {
|
|
const index = e.currentTarget.dataset.index;
|
|
const { todos } = this.data;
|
|
const newTodos = todos.map((todo, i) => {
|
|
if (i === index) {
|
|
return { ...todo, completed: !todo.completed };
|
|
}
|
|
return todo;
|
|
});
|
|
this.setData({
|
|
todos: newTodos,
|
|
});
|
|
},
|
|
removeTodo(e: any) {
|
|
const index = e.currentTarget.dataset.index;
|
|
const { todos } = this.data;
|
|
const newTodos = todos.filter((_, i) => i !== index);
|
|
this.setData({
|
|
todos: newTodos,
|
|
});
|
|
},
|
|
onTabChange(e: any) {
|
|
const targetPage = e.detail.value;
|
|
if (targetPage === 'home') {
|
|
wx.switchTab({ url: '/pages/index/index' });
|
|
} else if (targetPage === 'settings') {
|
|
wx.switchTab({ url: '/pages/settings/settings' });
|
|
}
|
|
// No need to navigate if already on 'list'
|
|
},
|
|
},
|
|
});
|
|
|