下拉更新、分享、阅读标识

本文配套视频地址：

开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具

这一篇中，我们把列表这块的剩余功能做完：下拉更新、分享、阅读标识。

<br>

下拉更新功能

下拉更新这个功能与我们在第一章中写的小 demo 所用方法一致：onReachBottom。

<br>

当用户滚动过程中触发了 上拉 这个动作时候，微信小程序会自动监听到并执行 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();        }    },   }

<br>

分享功能

类似于 onReachBottom，分享功能也是微信自带的一个监听事件回调函数 onShareAppMessage，它返回一个对象，对象中定义了分享的各种信息及分享成功和分享失败的回调，具体细节可以查看

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

let handler = {    // 此处省略部分代码    /*    * 分享    */    onShareAppMessage () {        let title = config.defaultShareText || '';        return {            title: title,            path: `/pages/index/index`,            success: function(res) {                // 转发成功            },            fail: function(res) {                // 转发失败            }        }    },}

<br>

阅读标识

如何实现阅读标识呢？其实思路也简单。如果用户从列表中点击某篇文章阅读，此篇文章肯定是需要标识的。所以我们只需要在跳转到文章详情之前，把此篇文章的 contentId 缓存起来

修改 index.wxml，视图中绑定点击事件 bindtap="showDetail"，同时增加三元判断，如果文章已经阅读过，我们给它增加一个 class="visited" 标识：

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

<br>

修改 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}`        });    },}

<br>

修改 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        });    },}

<br>

别急，写到这里，还没有结束呢，差最后一步了。

<br>

修改 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);

<br>

到此，列表页面的功能开发完成，下一篇我们将开始详情页面的开发

iKcamp官网：

访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。 包含：文章、视频、源代码

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

【11月11号】上海iKcamp最新活动

报名地址：

与“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队，面对面沟通交流。