微信小程序开发项目实战（微课版）课件 5-2 课件-新闻列表页面的实现

项目五新闻页面模块开发任务二新闻列表页面的实现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