- 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.
48 lines
1.8 KiB
Plaintext
48 lines
1.8 KiB
Plaintext
<!--pages/list/list.wxml-->
|
|
<view class="container">
|
|
<t-navbar title="我的任务" />
|
|
|
|
<view class="add-todo-section">
|
|
<t-input
|
|
t-class="add-todo-input"
|
|
placeholder="写下你的任务..."
|
|
value="{{newTodoText}}"
|
|
bind:change="onNewTodoInput"
|
|
bind:enter="addTodo"
|
|
/>
|
|
<t-button t-class="add-todo-button" theme="primary" icon="add" bind:tap="addTodo" />
|
|
</view>
|
|
|
|
<scroll-view class="todo-list-scroll" scroll-y type="list">
|
|
<t-cell-group t-class="todo-list">
|
|
<block wx:if="{{todos.length === 0}}">
|
|
<view class="empty-state">
|
|
<t-icon name="check-circle" size="xl" />
|
|
<text>太棒了!没有待办事项</text>
|
|
</view>
|
|
</block>
|
|
<block wx:else>
|
|
<t-cell wx:for="{{todos}}" wx:key="index" t-class-left="todo-item-left">
|
|
<view class="todo-item-content">
|
|
<t-checkbox
|
|
checked="{{item.completed}}"
|
|
bind:change="toggleTodo"
|
|
data-index="{{index}}"
|
|
icon="{{ item.completed ? ['check-circle-filled', 'circle'] : ['circle', 'check-circle-filled'] }}"
|
|
/>
|
|
<text class="{{item.completed ? 'todo-text completed' : 'todo-text'}}">{{item.text}}</text>
|
|
</view>
|
|
<t-icon name="delete" slot="right-icon" color="#e54d42" bind:tap="removeTodo" data-index="{{index}}" />
|
|
</t-cell>
|
|
</block>
|
|
</t-cell-group>
|
|
</scroll-view>
|
|
|
|
<t-tab-bar value="{{activeTab}}" bind:change="onTabChange" t-class="custom-tab-bar">
|
|
<t-tab-bar-item value="home" icon="home" aria-label="首页">首页</t-tab-bar-item>
|
|
<t-tab-bar-item value="list" icon="bulletpoint" aria-label="任务">任务</t-tab-bar-item>
|
|
<t-tab-bar-item value="settings" icon="setting" aria-label="设置">设置</t-tab-bar-item>
|
|
</t-tab-bar>
|
|
</view>
|
|
|