project init

pages/foot-tab/foot-tab.json

@@ -1,5 +1,7 @@
 {
     "component": true,
     "usingComponents": {
+        "t-tab-bar": "/components/tab-bar/tab-bar",
+        "t-tab-bar-item": "/components/tab-bar/tab-bar-item"
     }
 }

pages/today/index.js

@@ -1,5 +1,6 @@
 // pages/today/index.js
 const app = getApp();
+let pageStart = 1;
 Page({
 
     /**
@@ -9,51 +10,134 @@ Page({
         aIconList: ['check-rectangle', 'star-filled', 'notification', 'info-circle'],
         taskList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
         todayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
-        delayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'}],
+        delayList: [{'taskId':'1','title':'si哦大家艾吉奥是我','note':'2022-11-11'},
+            {'taskId':'2','title':'si哦大家艾吉奥是2321','note':'2022-11-11'},
+            {'taskId':'3','title':'打SD卡我怕','note':'2022-11-11'},
+            {'taskId':'4','title':'标无间道i文件舰店1','note':'2022-11-11'},
+            {'taskId':'5','title':'标题大家啊我i家1','note':'2022-11-11'},
+            {'taskId':'6','title':'标题德外而我却','note':'2022-11-11'},
+            {'taskId':'7','title':'标题德外旗额我去问1','note':'2022-11-11'},
+            {'taskId':'8','title':'千而万请问确定德外旗舰店1','note':'2022-11-11'},
+            {'taskId':'9','title':'标请问请问破千万1','note':'2022-11-11'},
+            {'taskId':'10','title':'标而且我请问请问1','note':'2022-11-11'},
+            {'taskId':'11','title':'代欧王大炮物品代码','note':'2022-11-11'},
+            {'taskId':'12','title':'到ID我们','note':'2022-11-11'},
+            {'taskId':'13','title':'我去哦额陪娃欧美大片请我们','note':'2022-11-11'},
+            {'taskId':'14','title':'请问哦气雾剂群殴','note':'2022-11-11'}
+        ],
+        duration: 300,  // swiper-item 切换过渡时间
+        categoryCur: 0, // 当前数据列索引
+        categoryMenu: ['任务清单','收藏任务','延期任务'], // 分类菜单数据, 字符串数组格式
+        categoryData: [], // 所有数据列
     },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
+    getList(type, currentPage) {
+        let currentCur = this.data.categoryCur;
+        let pageData = this.getCurrentData(currentCur);
+        if (pageData.end) return;
+        pageData.requesting = true;
+        this.setCurrentData(currentCur, pageData);
         wx.showLoading({
             title: '请稍候...',
             mask: true,
         })
-        console.log('请求中...')
         app.$api.taskList({}).then(res =>{
-            console.log(res);
-            console.log(res.data);
             this.setData({
                 taskList:res.data.taskList,
             })
+            let data = res.data || {
+                taskList: [],
+                over: false
+            };
+            let listData = this.data.delayList || [];
+            pageData.requesting = false;
+            if (type === 'refresh') {
+                pageData.listData = listData;
+                pageData.end = data.over;
+                pageData.page = currentPage + 1;
+            } else {
+                pageData.listData = pageData.listData.concat(listData);
+                pageData.end = data.over;
+                pageData.page = currentPage + 1;
+            }
+            this.setCurrentData(currentCur, pageData);
         })
     },
-    onEdit(e) {
-        console.log('收藏' + e.currentTarget.dataset.id);
+    // 更新页面数据
+    setCurrentData(currentCur, pageData) {
+        let categoryData = this.data.categoryData
+        categoryData[currentCur] = pageData
+        this.setData({
+            categoryData: categoryData
+        })
     },
-    onDelete(e) {
-        console.log('删除' + e.currentTarget.dataset.id);
+    // 获取当前激活页面的数据
+    getCurrentData() {
+        return this.data.categoryData[this.data.categoryCur]
     },
-    onTabsChange(event) {
-        console.log(`Change tab, tab-panel value is ${event.detail.value}.`);
+    // 顶部tab切换事件
+    toggleCategory(e) {
+        this.setData({
+            duration: 0
+        });
+        setTimeout(() => {
+            this.setData({
+                categoryCur: e.detail.index
+            });
+        }, 0);
     },
-
-    onTabsClick(event) {
-        console.log(`Click tab, tab-panel value is ${event.detail.value}.`);
+    // 页面滑动切换事件
+    animationFinish(e) {
+        this.setData({
+            duration: 300
+        });
+        setTimeout(() => {
+            this.setData({
+                categoryCur: e.detail.current
+            });
+            let pageData = this.getCurrentData();
+            if (pageData.listData.length === 0) {
+                this.getList('refresh', pageStart);
+            }
+        }, 0);
     },
+    // 刷新数据
+    refresh() {
+        this.getList('refresh', pageStart);
+    },
+    // 加载更多
+    more() {
+        this.getList('more', this.getCurrentData(this.data.categoryCur).page);
+    },
+    showArticle(e) {
+        console.log(e.detail)
+        // wx.setClipboardData({
+        //     data: e.currentTarget.dataset.link,
+        //     success(res) {
+        //         wx.showToast({
+        //             icon: "none",
+        //             title: "链接已复制到剪切板"
+        //         })
+        //     }
+        // })
+    },
+    onLoad() {
+        let categoryData = [];
+        this.data.categoryMenu.forEach(index =>{
+            categoryData.push({
+                categoryCur: index,
+                requesting: false,
+                end: false,
+                emptyShow: false,
+                page: pageStart,
+                listData: []
+            });
+        })
+        this.setData({
+            categoryData
+        });
+        // 第一次加载延迟 350 毫秒 防止第一次动画效果不能完全体验
+        setTimeout(() => {
+            this.refresh();
+        }, 350);
+    }
 })

pages/today/index.json

@@ -1,5 +1,7 @@
 {
     "usingComponents": {
-        "foot-tab": "../foot-tab/foot-tab"
+        "foot-tab": "../foot-tab/foot-tab",
+        "tab": "../../components/tab/index",
+        "scroll": "../../components/scroll/index"
     }
 }

pages/today/index.wxml

@@ -1,42 +1,39 @@
 <!--pages/today/index.wxml-->
-<t-tabs
-        defaultValue="{{0}}"
-        bind:change="onTabsChange"
-        bind:click="onTabsClick"
-        showBottomLine="{{false}}"
-        t-class="custom-tabs"
->
-    <t-tab-panel label="任务清单" value="0">
-        <t-swipe-cell wx:for="{{taskList}}" wx:key="{{index}}" >
-            <t-cell class="text_ath" title="{{item.title}}" note="{{item.note}}" bordered="{{true}}" hover/>
-            <view slot="right" class="t-swipe-cell-demo-btn-wrapper">
-                <view class="t-swipe-cell-demo-btn favor-btn" data-id='{{item.taskId}}' bind:tap="onEdit">收藏</view>
-                <view class="t-swipe-cell-demo-btn delete-btn" data-id='{{item.taskId}}' bind:tap="onDelete">删除</view>
+<view class="top-wrap">
+    <tab id="category"
+         tab-data="{{categoryMenu}}"
+         tab-cur="{{categoryCur}}"
+         size="{{80}}"
+         scroll="{{false}}"
+         bindchange="toggleCategory">
+    </tab>
+</view>
+
+<swiper current="{{categoryCur}}" duration="{{duration}}" bindanimationfinish="animationFinish">
+    <swiper-item wx:for="{{categoryData}}" wx:key="index">
+        <scroll requesting="{{item.requesting}}"
+                end="{{item.end}}"
+                list-count="{{item.listData.length}}"
+                has-top="{{true}}"
+                refresh-size="{{80}}"
+                bind:refresh="refresh"
+                bind:more="more">
+            <view class="cells">
+                <view class="cell"
+                      wx:for="{{item.listData}}"
+                      wx:key="index"
+                      data-link="{{item.link}}"
+                      bind:longpress="showArticle">
+                    <view class="name">
+                        <checkbox value="{{item.taskId}}" checked="{{item.complete}}"></checkbox>
+                        <rich-text nodes="{{item.title}}"></rich-text>
+                    </view>
+                    <view class="date">{{item.note}}</view>
+                </view>
             </view>
-        </t-swipe-cell>
-    </t-tab-panel>
-    <t-tab-panel label="收藏任务" value="1">
-        <t-swipe-cell wx:for="{{todayList}}" wx:key="{{index}}" >
-            <t-cell class="text_ath" title="{{item.title}}" note="{{item.note}}" bordered="{{true}}" hover/>
-            <view slot="right" class="t-swipe-cell-demo-btn-wrapper">
-                <view class="t-swipe-cell-demo-btn delete-btn" data-id='{{item.taskId}}' bind:tap="onDelete">删除</view>
-            </view>
-        </t-swipe-cell>
-    </t-tab-panel>
-    <t-tab-panel label="延期任务" value="2">
-        <t-swipe-cell wx:for="{{delayList}}" wx:key="{{index}}" >
-            <t-cell class="text_ath" title="{{item.title}}" note="{{item.note}}" bordered="{{true}}" hover/>
-            <view slot="right" class="t-swipe-cell-demo-btn-wrapper">
-                <view class="t-swipe-cell-demo-btn delete-btn" data-id='{{item.taskId}}' bind:tap="onDelete">删除</view>
-            </view>
-        </t-swipe-cell>
-    </t-tab-panel>
-</t-tabs>
-<cover-view class='phone-box' style='bottom: 170rpx' bindtap='callPhone'>
-    <cover-image icon="add"></cover-image>
-    <button class='hide-btn'></button>
-</cover-view>
-<t-fab icon="add" bind:click="handleClick"></t-fab>
+        </scroll>
+    </swiper-item>
+</swiper>
 <view>
     <foot-tab iconList="{{aIconList}}"/>
 </view>

pages/today/index.wxss

@@ -1,52 +1,39 @@
 /* pages/today/index.wxss */
-.t-swipe-cell-demo-btn-wrapper {
-    height: 100%;
+.top-wrap {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background-color: #ffffff;
+    z-index: 99;
+    box-shadow: 0 0 20rpx -5rpx rgba(0, 0, 0, 0.1);
 }
 
-.t-swipe-cell-demo-btn {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 144rpx !important;
-    height: 100%;
-    text-align: center;
-    color: white;
+swiper {
+    height: 100vh;
 }
 
-.t-swipe-cell-demo-btn.delete-btn {
-    background-color: #e34d59;
+.cells {
+    background: #ffffff;
+    margin-top: 20rpx;
 }
 
-.t-swipe-cell-demo-btn.edit-btn {
-    background-color: #ed7b2f;
+.cell {
+    padding: 20rpx;
 }
 
-.t-swipe-cell-demo-btn.favor-btn {
-    background-color: #0052d9;
+.cell:not(:last-child) {
+    border-bottom: 1rpx solid #ebedf0;
 }
 
-.title-image-large {
-    margin-right: 8rpx;
-    width: 144rpx;
-    height: 144rpx;
+.cell .name {
+    display: flex;
+    height: 50rpx;
+    font-size: 35rpx;
+    margin-bottom: 12rpx;
 }
 
-.text_ath {
-    text-decoration:line-through
-}
-
-.custom-tabs t-tab-panel {
-    text-align: center;
-    justify-content: center;
-    height: 172rpx;
-    line-height: 172rpx;
-    color: rgba(0, 0, 0, 0.26);
-}
-
-.phone-box {
-    position: absolute;
-    bottom: 30rpx;
-    left: 30rpx;
-    width: 130rpx;
-    height: 130rpx;
+.cell .date {
+    color: #999999;
+    font-size: 24rpx;
 }