下拉更新、分享、閱讀標識
本文配套視頻地址：
v.qq.com/x/page/h055… 開始前請把 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
* 然后調(diào)用公用的請求函數(shù)
*/
onReachBottom () {
if (this.data.hasMore) {
let nextPage = this.data.page + 1;
this.setData({
page: nextPage
});
this.requestArticle();
}
},
}
分享功能
類似于 onReachBottom ，分享功能也是微信自帶的一個監(jiān)聽事件回調(diào)函數(shù) onShareAppMessage ，它返回一個對象，對象中定義了分享的各種信息及分享成功和分享失敗的回調(diào)，具體細節(jié)可以查看分享接口官方文檔
修改 index.js ，增加分享的回調(diào)事件：
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" ，同時增加三元判斷，如果文章已經(jīng)閱讀過，我們給它增加一個 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">暫時沒有更多內(nèi)容</view>
</view>
修改 index.js ，增加點擊事件的回調(diào)函數(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ù)中調(diào)用：
let handler = {
// 此處省略部分代碼
showDetail (e) {
let dataset = e.currentTarget.dataset
let item = dataset && dataset.item
let contentId = item.contentId || 0
// 調(diào)用實現(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官網(wǎng)：www.ikcamp.com
訪問官網(wǎng)更快閱讀全部免費分享課程：《iKcamp出品｜全網(wǎng)較新｜微信小程序｜基于較新版1.0開發(fā)者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼
iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東、當當開售。
【11月11號】上海iKcamp較新活動
報名地址： www.huodongxing.com/event/54099…
與 “天天練口語” 小程序總榜排名第四、教育類排名先進的研發(fā)團隊，面對面溝通交流。
