下拉更新、分享、阅读标识
本文配套视频地址：
https://v.qq.com/x/page/h0554i4u5ob.html
开始前请把
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" 标识：
<view class="wrapper">
<!--repeat-->
<view wx:for="{{ articleList }}" wx:for-item="group" wx:key="{{ group.date }}" class="group">
<view class="group-bar">
<view class="group-title {{ group.formateDate === '今日' ? 'on' : ''}}">{{ group.formateDate }}</view>
</view>
<view class="group-content">
<!--repeat-->
<!-- 增加点击事件 bindtap="showDetail" -->
<view wx:for="{{ group.articles }}" wx:for-item="item" wx:key="{{ item.contentId }}" data-item="{{ item }}" bindtap="showDetail" class="group-content-item {{ item.hasVisited ? 'visited' : '' }}">
<view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">{{ item.title }}</view>
<image mode="aspectFill" class="group-content-item-img" src="{{ item.cover || defaultImg.coverImg }}" ></image>
</view>
</view>
</view>
<view hidden="{{ hasMore }}" class="no-more">暂时没有更多内容</view>
</view>
修改 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前端高效开发实战》已在亚马逊、京东、当当开售。
【11月11号】上海iKcamp最新活动
与
“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队，面对面沟通交流。
网友评论