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

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

開始前請(qǐng)把 ch3-4 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具  
這一篇中，我們把列表這塊的剩余功能做完：下拉更新、分享、閱讀標(biāo)識(shí)。

下拉更新這個(gè)功能與我們?cè)诘谝徽轮袑懙男?demo 所用方法一致：onReachBottom。

當(dāng)用戶滾動(dòng)過程中觸發(fā)了 上拉 這個(gè)動(dòng)作時(shí)候，微信小程序會(huì)自動(dòng)監(jiān)聽到并執(zhí)行 onReachBottom 這個(gè)函數(shù)，所以我們只需要把這個(gè)監(jiān)聽事件寫好就行了：

修改 index.js，增加 onReachBottom 函數(shù)：

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

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

類似于 onReachBottom，分享功能也是微信自帶的一個(gè)監(jiān)聽事件回調(diào)函數(shù) onShareAppMessage，它返回一個(gè)對(duì)象，對(duì)象中定義了分享的各種信息及分享成功和分享失敗的回調(diào)，具體細(xì)節(jié)可以查看分享接口官方文檔

修改 index.js，增加分享的回調(diào)事件：

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

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

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

修改 index.wxml，視圖中綁定點(diǎn)擊事件 bindtap="showDetail"，同時(shí)增加三元判斷，如果文章已經(jīng)閱讀過，我們給它增加一個(gè) class="visited" 標(biāo)識(shí)：

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

    

修改 index.js，增加點(diǎn)擊事件的回調(diào)函數(shù) showDetail:

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

    /*
    * 通過點(diǎn)擊事件，我們可以獲取到當(dāng)前的節(jié)點(diǎn)對(duì)象
    * 同樣也可以獲取到節(jié)點(diǎn)對(duì)象上綁定的 data-X 數(shù)據(jù)
    * 獲取方法： e.currentTarget.dataset
    * 此處我們先獲取到 item 對(duì)象，它包含了文章 id
    * 然后帶著參數(shù) id 跳轉(zhuǎn)到詳情頁(yè)面
    */
    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，增加處理標(biāo)識(shí)功能的函數(shù) markRead，并在上面的 showDetail 函數(shù)中調(diào)用：

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

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

            /*
            * 處理過后，如果 data(老數(shù)據(jù)) 與 newStorage(新數(shù)據(jù)) 不一樣，說明閱讀記錄發(fā)生了變化
            * 不一樣的話，我們就需要把新的記錄重新存入緩存和 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
        });
    },
}

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

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

"use strict";

// 引入工具類庫(kù) 
import util from "./utils/index";

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

        // 增加初始化緩存數(shù)據(jù)功能
        util.getStorageData("visited", (data)=> {
            this.globalData.visitedArticles = data; 
        });
    },
    alert (title = "提示", content = "好像哪里出了小問題~請(qǐng)?jiān)僭囈淮蝵") {
        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);

到此，列表頁(yè)面的功能開發(fā)完成，下一篇我們將開始詳情頁(yè)面的開發(fā)

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

iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。

報(bào)名地址：http://www.huodongxing.com/ev...
與“天天練口語(yǔ)”小程序總榜排名第四、教育類排名第一的研發(fā)團(tuán)隊(duì)，面對(duì)面溝通交流。