下拉更新、分享你虹、閱讀標識
本文配套視頻地址：
https://v.qq.com/x/page/h0554i4u5ob.html
開始前請把
ch3-4分支中的code/目錄導入微信開發(fā)工具
這一篇中绘搞，我們把列表這塊的剩余功能做完：下拉更新、分享傅物、閱讀標識夯辖。
下拉更新功能
下拉更新這個功能與我們在第一章中寫的小
demo所用方法一致：onReachBottom。
當用戶滾動過程中觸發(fā)了 上拉 這個動作時候董饰，微信小程序會自動監(jiān)聽到并執(zhí)行 onReachBottom 這個函數(shù)蒿褂，所以我們只需要把這個監(jiān)聽事件寫好就行了：
修改 index.js，增加 onReachBottom 函數(shù)：
let handler = {
// 此處省略部分代碼
/*
* 每次觸發(fā)尖阔，我們都會先判斷是否還可以『加載更多』
* 如果滿足條件贮缅，那說明可以請求下一頁列表數(shù)據(jù)，這時候把 data.page 累加 1
* 然后調用公用的請求函數(shù)
*/
onReachBottom () {
if (this.data.hasMore) {
let nextPage = this.data.page + 1;
this.setData({
page: nextPage
});
this.requestArticle();
}
},
}
分享功能
類似于 onReachBottom介却，分享功能也是微信自帶的一個監(jiān)聽事件回調函數(shù) onShareAppMessage谴供，它返回一個對象，對象中定義了分享的各種信息及分享成功和分享失敗的回調齿坷，具體細節(jié)可以查看分享接口官方文檔
修改 index.js桂肌，增加分享的回調事件：
let handler = {
// 此處省略部分代碼
/*
* 分享
*/
onShareAppMessage () {
let title = config.defaultShareText || '';
return {
title: title,
path: `/pages/index/index`,
success: function(res) {
// 轉發(fā)成功
},
fail: function(res) {
// 轉發(fā)失敗
}
}
},
}
閱讀標識
如何實現(xiàn)閱讀標識呢？其實思路也簡單永淌。如果用戶從列表中點擊某篇文章閱讀崎场，此篇文章肯定是需要標識的。所以我們只需要在跳轉到文章詳情之前遂蛀，把此篇文章的 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，增加點擊事件的回調函數(shù) showDetail:
let handler = {
// 此處省略部分代碼
/*
* 通過點擊事件所坯，我們可以獲取到當前的節(jié)點對象
* 同樣也可以獲取到節(jié)點對象上綁定的 data-X 數(shù)據(jù)
* 獲取方法： e.currentTarget.dataset
* 此處我們先獲取到 item 對象谆扎，它包含了文章 id
* 然后帶著參數(shù) 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，增加處理標識功能的函數(shù) markRead芹助，并在上面的 showDetail 函數(shù)中調用：
let handler = {
// 此處省略部分代碼
showDetail (e) {
let dataset = e.currentTarget.dataset
let item = dataset && dataset.item
let contentId = item.contentId || 0
// 調用實現(xiàn)閱讀標識的函數(shù)
this.markRead( contentId )
wx.navigateTo({
url: `../detail/detail?contentId=${contentId}`
});
},
/*
* 如果我們只是把閱讀過的文章contentId保存在globalData中堂湖，則重新打開小程序后闲先，記錄就不存在了
* 所以，如果想要實現(xiàn)下次進入小程序依然能看到閱讀標識无蜂，我們還需要在緩存中保存同樣的數(shù)據(jù)
* 當進入小程序時候伺糠，從緩存中查找，如果有緩存數(shù)據(jù)酱讶，就同步到 globalData 中
*/
markRead (contentId) {
//先從緩存中查找 visited 字段對應的所有文章 contentId 數(shù)據(jù)
util.getStorageData('visited', (data)=> {
let newStorage = data;
if (data) {
//如果當前的文章 contentId 不存在退盯，也就是還沒有閱讀，就把當前的文章 contentId 拼接進去
if (data.indexOf(contentId) === -1) {
newStorage = `${data},${contentId}`;
}
}
// 如果還沒有閱讀 visited 的數(shù)據(jù)泻肯，那說明當前的文章是用戶閱讀的第一篇渊迁，直接賦值就行了
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
});
},
}
別急，寫到這里稚铣，還沒有結束呢箱叁，差最后一步了。
修改 app.js惕医，小程序初始化時候耕漱，我們從緩存中把數(shù)據(jù)拿出來，賦值給 globalData抬伺，這樣就做到了真正的閱讀標識
'use strict';
// 引入工具類庫
import util from './utils/index';
let handler = {
onLaunch () {
this.getDevideInfo();
// 增加初始化緩存數(shù)據(jù)功能
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);
到此螟够，列表頁面的功能開發(fā)完成，下一篇我們將開始詳情頁面的開發(fā)
iKcamp官網：http://www.ikcamp.com
訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓教程分享》峡钓。
包含：文章妓笙、視頻、源代碼
iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜能岩、京東寞宫、當當開售。
【11月11號】上海iKcamp最新活動
與
“天天練口語”小程序總榜排名第四拉鹃、教育類排名第一的研發(fā)團隊辈赋，面對面溝通交流。
