項目五新聞頁面模塊開發任務二新聞列表頁面的實現Newslistpageimplementation通過前面的學習，讀者已經知道數據可以定義在JS文件的data對象中。當數據較多時，或者當沒有條件提供數據接口時，可以采用模擬數據進行代替。例如，可以將數據定義在utils/common.js文件中。項目五新聞頁面模塊開發任務描述MOCK數據使用Mock數據可以保護真實數據源中的敏感信息，避免因為開發和測試而導致真實數據泄露的風險。真實數據的保護Mock數據能夠提供可用的虛擬數據，使得開發人員和測試人員能夠在沒有完整的系統和真實數據的情況下進行工作?？焖匍_發和測試Mock數據允許前后端團隊并行開發，以提高整個開發過程的效率。獨立開發和測試0201Mock數據優點03

Mock數據是指在軟件開發過程中使用的一種模擬數據，它用于模擬真實數據源的數據，具有相似的數據結構和字段。這種數據通常在真實數據不可用或無法獲取時使用，以便在開發、測試和演示過程中提供可用的虛擬數據。模擬數據的定義其中，id表示每條數據的編號，title表示新聞的標題，cate_id表示新聞分類編號，poster表示卡片新聞的貼圖，desc表示卡片新聞的摘要，content表示新聞內容詳情，views表示瀏覽數量，favorites表示收藏數量，addtime表示新聞添加時間，添加時間引入了小程序默認的util文件中定義的時間格式，使用Date()函數獲取當前系統時間。bgmusic表示背景音樂，包括了音樂地址和音樂名稱。

下面提供了1條新聞列表數據作為示例。讀者可以根據視圖界面的功能，自行添加或修改新聞內容。模擬數據的定義

import

util

from

'../utils/util'const

news=[

{

id:'01',

title:'最美梅花園',

cate_id:'1',

poster:'/images/news/news1.jpg',

desc:'“蘿崗香雪”曾是羊城八景之一',

content:

'不同種類的梅花將陸陸續續開放兩個多月...',

views:'1250',

//瀏覽數量

favorites:

'63',

//收藏數量

addtime:util.formatTime(new

Date()),

bgmusic:{

url:'/music/4.mp3',title:'四季歌'}}]模擬數據的定義

constnews=[代碼略] exports.getNewsList=()=>{ letnewslist=[] for(vari=0;i<news.length;i++){ letobj={} obj.id=news[i].id obj.title=news[i].title obj.poster=news[i].poster obj.desc=news[i].desc obj.views=news[i].views obj.favorites=news[i].favorites obj.content=news[i].content obj.addtime=news[i].addtime obj.bgmusic=news[i].bgmusic newslist.push(obj) } returnnewslist; }

getNewsList()函數將前面所定義好的news數據使用for循環的方式讀取，調用push()方法寫到newslist數組里，最后返回newslist數組。模擬數據的定義

exports.getNewsDetail=(newsid)=>{ letnewsDetail={}; for(vari=0;i<news.length;i++){ if(newsid==news[i].id){ newsDetail=news[i]; break; } } returnnewsDetail; }

在utils/common.js文件中定義getNewsDetail()函數通過傳入的參數newsid來獲取需要讀取的新聞詳情。新聞列表頁面數據綁定

varcommon=require('../../utils/common.js') Page({ data:{

newsList:[] }, onLoad:function(options){

letnewsList=common.getNewsList()

this.setData({

newsList:newsList

}) }, })

首先通過加載/utils/common.js里的模擬數組news里的數據來顯示新聞列表。打開pages/news/news.js頁面，使用require()方法將/utils/common.js文件引入。篩選功能的設計圖

篩選效果圖

新聞分類列表圖

按時間分類

篩選功能可以對新聞數據分類，以便更容易地理解和管理，并從中抽取出有用的信息，本案例分成兩種方式篩選，一種是按新聞分類，另外一種按照時間排序，效果如下圖所示。篩選功能的實現

<viewclass="filter"> <viewclass="filter-tab"></view> <viewclass="filter-content"></view> <viewclass="filter-shadow"></view>

</view>

打開pages/news/news.wxml，篩選功能是在新聞列表的上部，所以需要將代碼放置在頁面的上部，將篩選功能分成三個容器，class為filter-tab表示篩選條件，class為filter-content表示篩選區域，class為filter-shadow篩選下面的陰影部分。下拉刷新示例

啟用下拉刷新有兩種方式，一種是全局開啟下拉刷新，在app.json的window節點中，將enablePullDownRefresh設置為true，開啟之后小程序所有的頁面的具有下拉刷新的功能。一種是局部開啟下拉刷新，在單個頁面的.json配置文件中，將enablePullDownRefresh設置為true，則單個頁面具有下拉刷新的作用。backgroundColor配置下拉刷新窗口的背景顏色，僅支持16進制的顏色值。backgroundTextStyle配置下拉刷新loading的樣式，僅支持dark和light。上拉觸底示例data:

{

pagenum:

1,

//初始頁默認值為1

[代碼略]}

在小程序的開發過程中，上拉加載是一種十分常見的加載效果，常用于上拉下一頁數據。上拉加載的本質是頁面觸底，或者快要觸底時的動作。在微信小程序中，通過函數onReachBottom:function(){}實現上拉加載。上拉觸底示例

onReachBottom()

{

var

that=this;

var

pagenum

=

that.data.pagenum

+

1;

//獲取當前頁數并加1

let

newsdata

=

common.getNewsList()

that.setData({

pagenum:

pagenum,

//更新當前頁數

newsList:

[...this.data.newsList,

...newsdata

]

})

},

編寫pages/news/news.js文件代碼。onReachBottom()函數可以監聽用戶上拉觸底事件，Javascript中“...”是擴展運算符(...)可在函數調用/數組構造時,將數組表達式或者string在語法層面展開；還可以在構造對象時,將對象表達式按key-value的方式展開。例如在本案例中：頁面跳轉API屬性類型必填說明urlstring是需要跳轉的應用內非tabBar的頁面的路徑(代碼包路徑)eventsObject否頁面間通信接口，用于監聽被打開頁面發送到當前頁面的數據。successfunction否接口調用成功的回調函數failfunction否接口調用失敗的回調函數completefunction否接口調用結束的回調函數（調用成功、失敗都會執行）表wx.navigateTo參數列表

頁面之間的跳轉有多種方式，其中wx.navigateTo(Objectobject)可以跳轉之后，保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面，小程序中頁面棧最多十層。頁面跳轉API<textclass='card-read'bindtap='handleDetail'data-id='{{news.id}}'>查看詳情</text>

handleDetail:function(e){

let

id=e.currentTarget.dataset.id;

wx.navigateTo({

url:'../newsDet