摘要：下拉更新分享閱讀標識本文配套視頻地址開始前請把分支中的目錄導入微信開發工具這一篇中，我們把列表這塊的剩余功能做完下拉更新分享閱讀標識。

本文配套視頻地址：
https://v.qq.com/x/page/h0554...

開始前請把 ch3-4 分支中的 code/ 目錄導入微信開發工具  
這一篇中，我們把列表這塊的剩余功能做完：下拉更新、分享、閱讀標識。

下拉更新這個功能與我們在第一章中寫的小 demo 所用方法一致：onReachBottom。

當用戶滾動過程中觸發了 上拉 這個動作時候，微信小程序會自動監聽到并執行 onReachBottom 這個函數，所以我們只需要把這個監聽事件寫好就行了：

修改 index.js，增加 onReachBottom 函數：

let handler = {
    // 此處省略部分代碼

    /*
    * 每次觸發，我們都會先判斷是否還可以『加載更多』
    * 如果滿足條件，那說明可以請求下一頁列表數據，這時候把 data.page 累加 1
    * 然后調用公用的請求函數
    */
    onReachBottom () {
        if (this.data.hasMore) {
            let nextPage = this.data.page + 1;
            this.setData({
                page: nextPage
            });
            this.requestArticle();
        }
    },   
}

類似于 onReachBottom，分享功能也是微信自帶的一個監聽事件回調函數 onShareAppMessage，它返回一個對象，對象中定義了分享的各種信息及分享成功和分享失敗的回調，具體細節可以查看分享接口官方文檔

修改 index.js，增加分享的回調事件：

let handler = {
    // 此處省略部分代碼

    /*
    * 分享
    */
    onShareAppMessage () {
        let title = config.defaultShareText || "";
        return {
            title: title,
            path: `/pages/index/index`,
            success: function(res) {
                // 轉發成功
            },
            fail: function(res) {
                // 轉發失敗
            }
        }
    },
}

如何實現閱讀標識呢？其實思路也簡單。如果用戶從列表中點擊某篇文章閱讀，此篇文章肯定是需要標識的。所以我們只需要在跳轉到文章詳情之前，把此篇文章的 contentId 緩存起來

修改 index.wxml，視圖中綁定點擊事件 bindtap="showDetail"，同時增加三元判斷，如果文章已經閱讀過，我們給它增加一個 class="visited" 標識：

    
    
        
            {{ group.formateDate }}
        
        
            
            
            
                {{ item.title }}
                
            
        
    

    

修改 index.js，增加點擊事件的回調函數 showDetail:

let handler = {
    // 此處省略部分代碼

    /*
    * 通過點擊事件，我們可以獲取到當前的節點對象
    * 同樣也可以獲取到節點對象上綁定的 data-X 數據
    * 獲取方法： e.currentTarget.dataset
    * 此處我們先獲取到 item 對象，它包含了文章 id
    * 然后帶著參數 id 跳轉到詳情頁面
    */
    showDetail (e) {
        let dataset = e.currentTarget.dataset
        let item = dataset && dataset.item
        let contentId = item.contentId || 0
        wx.navigateTo({
            url: `../detail/detail?contentId=${contentId}`
        });
    },
}

修改 index.js，增加處理標識功能的函數 markRead，并在上面的 showDetail 函數中調用：

let handler = {
    // 此處省略部分代碼

    showDetail (e) {
        let dataset = e.currentTarget.dataset
        let item = dataset && dataset.item
        let contentId = item.contentId || 0
        // 調用實現閱讀標識的函數
        this.markRead( contentId )
        wx.navigateTo({
            url: `../detail/detail?contentId=${contentId}`
        });
    },
    /*
    * 如果我們只是把閱讀過的文章contentId保存在globalData中，則重新打開小程序后，記錄就不存在了
    * 所以，如果想要實現下次進入小程序依然能看到閱讀標識，我們還需要在緩存中保存同樣的數據
    * 當進入小程序時候，從緩存中查找，如果有緩存數據，就同步到 globalData 中
    */
    markRead (contentId) {
        //先從緩存中查找 visited 字段對應的所有文章 contentId 數據
        util.getStorageData("visited", (data)=> {
            let newStorage = data;
            if (data) {
                //如果當前的文章 contentId 不存在，也就是還沒有閱讀，就把當前的文章 contentId 拼接進去
                if (data.indexOf(contentId) === -1) {
                    newStorage = `${data},${contentId}`;
                }
            }
            // 如果還沒有閱讀 visited 的數據，那說明當前的文章是用戶閱讀的第一篇，直接賦值就行了 
            else {
                newStorage = `${contentId}`;
            }

            /*
            * 處理過后，如果 data(老數據) 與 newStorage(新數據) 不一樣，說明閱讀記錄發生了變化
            * 不一樣的話，我們就需要把新的記錄重新存入緩存和 globalData 中 
            */
            if (data !== newStorage) {
                if (app.globalData) {
                    app.globalData.visitedArticles = newStorage;
                }
                util.setStorageData("visited", newStorage, ()=>{
                    this.resetArticles();
                });
            }
        });
    },
    resetArticles () {
        let old = this.data.articleList;
        let newArticles = this.formatArticleData(old);
        this.setData({
            articleList: newArticles
        });
    },
}

別急，寫到這里，還沒有結束呢，差最后一步了。

修改 app.js，小程序初始化時候，我們從緩存中把數據拿出來，賦值給 globalData，這樣就做到了真正的閱讀標識

"use strict";

// 引入工具類庫 
import util from "./utils/index";

let handler = {
    onLaunch () {
        this.getDevideInfo();

        // 增加初始化緩存數據功能
        util.getStorageData("visited", (data)=> {
            this.globalData.visitedArticles = data; 
        });
    },
    alert (title = "提示", content = "好像哪里出了小問題~請再試一次~") {
        wx.showModal({
            title: title,
            content: content
        })
    },
    getDevideInfo () {
        let self = this;
        wx.getSystemInfo({
            success: function (res) {
                self.globalData.deviceInfo = res;
            }
        })
    },
    globalData: {
        user: {
            openId: null
        },
        visitedArticles: "",
        deviceInfo: {}
    }
};

App(handler);

到此，列表頁面的功能開發完成，下一篇我們將開始詳情頁面的開發

iKcamp官網：http://www.ikcamp.com
訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。

報名地址：http://www.huodongxing.com/ev...
與“天天練口語”小程序總榜排名第四、教育類排名第一的研發團隊，面對面溝通交流。