本文配套视频地址:
v.qq.com/x/page/h055…
开始前请把
分支中的
- 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
- });
- },
- }
别急,写到这里,还没有结束呢,差最后一步了。
修改
,小程序初始化时候,我们从缓存中把数据拿出来,赋值给 globalData,这样就做到了真正的阅读标识
- app.js
- '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官网:www.ikcamp.com
访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码
iKcamp原创新书《移动web前端高效开发实战》已在亚马逊、京东、当当开售。
报名地址:www.huodongxing.com/event/54099…
与
小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。
- “天天练口语”
来源: https://juejin.im/post/59f691fa518825297a0e060f