下拉更新分享看logo本文配套视频地址：https：//v.qq.com/x/page/h0554...开始前请将ch3-4分支的code/目录导入微信开发工具。我们将完成列表的其余功能：下拉更新、分享和阅读徽标。下拉更新函数下拉更新函数与第一章我们写的小demo中使用的方法一致：onReachBottom。当用户在滚动时触发上拉动作，微信小程序会自动监听并执行onReachBottom函数，所以我们只需要写这个监听事件：修改index.js，添加onReachBottom函数：lethandler={//此处省略部分代码/**每次触发时，我们都会先判断是否可以“加载更多”*如果满足条件，则表示可以请求下一页列表数据，并且此时data.page会累加1*然后调用公共请求函数*/onReachBottom(){if(this.data.hasMore){letnextPage=this.data.page+1;this.setData({page:nextPage});this.requestArticle();}},}分享功能类似于onReachBottom。分享功能也是微信自带的监听事件回调函数onShareAppMessage。返回一个对象，定义了各种分享信息和分享成功、分享失败的回调。具体可以查看分享接口的官方文档，修改index.js，增加分享回调事件：||'';return{title:title,path:`/pages/index/index`,success:function(res){//转发成功},fail:function(res){//转发失败}}},}readmark如何实现readmark？其实思路也很简单。如果用户点击了一篇文章来阅读列表中的内容，那么这篇文章就必须被识别出来。所以我们只需要缓存这篇文章的contentId，并在跳转到文章详情之前修改index.wxml，在视图中绑定点击事件bindtap="showDetail"，同时添加一个三元判断即可。如果文章已被阅读，我们为其添加一个class="visited"标记：{{group.formatDate}}{{item.标题}}暂无更多内容修改index.js，增加点击事件回调函数showDetail:lethandler={//这里省略部分代码/**通过点击事件，我们可以得到当前节点对象*也可以得到节点对象绑定的data-X数据*获取方法：e.currentTarget.dataset*这里我们先获取item对象，其中包含文章id*然后跳转到带有参数id的详情页*/showDetail(e){letdataset=e.currentTarget.datasetletitem=dataset&&dataset.itemletcontentId=项目。内容编号||0wx.navigateTo({url:`../detail/detail?contentId=${contentId}`});},}修改index.js，增加函数markRead处理识别函数，以及上面的showDetail函数中调用：lethandler={//这里省略部分代码showDetail(e){letdataset=e.currentTarget.dataset让item=dataset&&dataset.item让contentId=item.contentId||0//调用函数this.markRead(contentId)wx.navigateTo({url:`../detail/detail?contentId=${contentId}`});},/**如果我们只是把读过的文章的contentId保存在globalData中，重新打开小程序后这条记录就不存在了*所以，如果我们要实现下次进入小程序时仍然可以看到阅读标识这个时候，我们还需要在缓存中保存同样的数据*进入小程序的时候，从缓存中查找，如果有缓存数据，就会同步到globalData中*/markRead(contentId){//首先从缓存contentId数据中查找visited字段对应的所有文章util.getStorageData('visited',(data)=>{letnewStorage=data;if(data){//如果当前文章的contentId没有不存在，即没有读过，将当前文章的contentId拼接进去if(data.indexOf(contentId)===-1){newStorage=`${data},${contentId}`;}}//如果访问过的数据没有被读取过，则说明当前文章被用户读取了在第一篇文章中，直接赋值即可else{newStor年龄=`${contentId}`;}/**处理后，如果data（旧数据）和newStorage（新数据）不一样，说明发送了阅读记录发生了变化*如果不同，我们需要将新记录重新存储到缓存和globalData*/if(data!==newStorage){if(app.globalData){app.globalData.visitedArticles=newStorage;}util.setStorageData('visited',newStorage,()=>{this.resetArticles();});}});},resetArticles(){letold=this.data.articleList;让newArticles=this.formatArticleData(old);this.setData({articleList:newArticles});},}别着急，还没结束，是最后一步修改app.js。小程序初始化的时候，我们从缓存中取出数据，赋值给globalData，这样就实现了真正的读标‘usestrict’；//引入工具类库importutilfrom‘./utils/index’;lethandler={onLaunch(){this.getDevideInfo();//增加初始化缓存数据的功能util.getStorageData('visited',(data)=>{this.globalData.visitedArticles=data;});},alert(title='提示',content='出错了~请重试~'){wx.showModal({title:title,content:content})},getDevideInfo(){letself=this;wx.getSystemInfo({success:function(res){self.globalData.deviceInfo=res;}})},globalData:{user:{openId:null},visitedArticles:'',deviceInfo:{}}};应用程序（处理程序）；至此，列表页的功能开发完成，下一篇开始详情页的开发iKcamp官网：http://www.ikcamp.com访问官网阅读所有免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》.包含：文章、视频、源码iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当网发售。【11月11日】上海iKcamp最新活动报名地址：http://www.huodongxing.com/ev...以及“天天练英语”小程序总榜第四名的研发团队及排行榜首先在教育类别中，面对面交流。
