最终效果:
实现:
1.首先最开始,我们新闻页面所需要的所有信息(文字、图片、时间等)都需要调用后台接口获取,此时需要使用官方文档的wx.request这个API,注意!!请事先在后台添加request请求域名,否则会报域名不合法的错误。
2.在初始化函数中写如下代码(将返回的数据放在本地缓存是为了后面详情页使用):
3.(1)可以看到,页面主要由上半部分的轮播图和下部分的新闻列表组成,点击均可跳转详情页。WXML的代码为:
(2)其中轮播图部分跳转详情是通过swiperClick这个方法,在这个方法中我们要获取轮播图当前的下标swiperCurrent以决定跳到哪个详情。而当前下标是在swiperChange方法里得到的,具体代码为:
列表跳到新闻页则是通过组件navigator的url属性跳转。这两种跳转都需要传一个index值,在swiperClick中index就是当前的swiperCurrent,在navigator中我们则通过wx:for-index赋值去获取。
4.新闻详情页的效果图如下:
5.新闻详情页的页面结构比较简单,主要代码为下:
我们可以看到,e.index可以获取传递过来的下标,然后在本地缓存中通过下标取出我们需要的信息,赋给数组。
小提示:
这里还有个小小的问题,就是通常请求回的数据中包含大量html格式,在排版上,还需要经过富文本解析,让它变得更美观。我将富文本解析代码放在app.js中。
一个简易新闻阅读类的小程序这样就可以实现了,至于WXSS代码我就不贴了。大家可以根据自己想要的效果进行调整。