微信小程序极简入门（五）--豆瓣电影小程序实现上下滑动列表页

本节将实现一个可以上下滚动的列表，当滚动到底部时提示“继续滑动加载更多”，如图：



1.首先还是在app.json中的pages数组中添加代码 “pages/douban/list”,并放置到第一行：

{
"pages":[
"pages/douban/list",
"pages/douban/index",
"pages/douban/splash",
"pages/douban/item",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

2.打开pages/douban/list.js,修改data变量：

/**
* 页面的初始数据
*/
data: {
type: 'in_theaters',
page: 1,
size: 20,
total: 1,
movies: []
},

其中，type是调用豆瓣API时需要用到的电影类型。page是分页的页码，代表当前第几页，size代表每次最多拉取多少条数据，total需从豆瓣API获取，默认为1，movies是拉取到的数据。由于允许查看多页内容，因此movies是一个累加数组。

2.在data下方添加一个retrieve方法：

retrieve() {
let app = getApp()
let start = (this.data.page - 1) * this.data.size

wx.showLoading({
title: '加载中'
})

return app.request(`https://api.douban.com/v2/movie/${this.data.type}?start=${start}&count=${this.data.size}`)
.then(res => {
if (res.subjects.length) {
let movies = this.data.movies.concat(res.subjects)
let total = Math.floor(res.total / this.data.size)
this.setData({ movies: movies, total: total, page: this.data.page })
wx.setNavigationBarTitle({ title: res.title })
}
}).catch(err => {
console.error(err)
}).finally(() => {
wx.hideLoading()
})
},

这个方法用于从豆瓣API分页拉取数据，默认是从第一页拉取。如果当前页数大于总页数，则不再拉取。

app.request函数返回Promise对象，无论从接口拉取成功或者失败，finally都会执行，所以在这里需要隐藏加载提示。wx.hideLoading是隐藏加载提示的界面交互API，与之对应的，先于app.request调用的wx.showLoading是显示加载提示的API。

concat是js数组的方法，用于连接两个数组，拼接元素返回新数组。

3.模版组件

我们通常也会在一个程序里面构建了很多列表页，所以我们可以在一个文件中定义模版组件，以便其它页面复用该组件。当然在本节的项目中，只有一个页面用到了该组件，但养成良好的编码习惯也是非常有必要的。

在目录树中新建pages/douban/list-template.wxml:

<template name="list-template">
<scroll-view style="display:inline" enable-back-to-top scroll-y bindscrolltolower="loadMorePage">
<view class="weui-panel">
<view class="weui-panel__bd">
<navigator wx:for="{{ movies }}" wx:key="{{ item.id }}" url="item?id={{ item.id }}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg" style="height:inherit;width:120rpx">
<image style="width: 128rpx;height: 168rpx;" class="weui-media-box__thumb" src="{{ item.images.small }}" />
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
<view class="weui-media-box__title">{{ item.title }}</view>
<view class="weui-media-box__desc">{{ item.original_title }} ({{ item.year }})</view>
<view class="weui-media-box__info">
导演：
<block wx:for="{{ item.directors }}" wx:key="{{ item.id }}"> {{ item.name }} </block>
</view>
</view>
<view class="weui-media-box__ft">
<view class="weui-badge">{{ item.rating.average }}</view>
</view>
</navigator>
</view>
</view>
<view class="weui-loadmore" wx:if="{{total>page}}">
<view class="weui-loadmore__tips">继续向上滑动加载更多内容</view>
</view>
</scroll-view>
</template>

在该模版组件中取用了三个模版变量：movies、page、total。它们将在模版调用时传入，在目录树中打开pages/douban/list.wxml文件，修改代码：

<!--pages/douban/list.wxml-->
<import src="list-template" />
<template is="list-template" data="{{ movies,total,page }}" />

这个引入模版组件很容易读懂，list.wxml和list-template.wxml都在同一目录下，所以使用相对路径就可以了，在小程序中，对于wxml文件的引用，都不带扩展名。

4.加载更多

实现加载更多，需要使用loadMorePage方法，但在模拟组件list-template.wxml中使用的

enable-back-to-top scroll-y bindscrolltolower="loadMorePage"

loadMorePage方法还没有被定义，因此需要在这个方法中需要将page加1，然后再次拉取分页数据。

打开pages/douban/list.js，添加loadMorePage函数，代码如下：

loadMorePage() {
if (this.data.page > this.data.total) return
this.data.page++
this.retrieve()
},

列表页整体代码就完成了，当然，我们在pages/douban/list-template.wxml同样指定了跳转到详情页的url：



所以点击列表页也会跳转到相应的详情页，赶快点击模拟器看看效果吧！

github代码地址：

https://github.com/lightTrace/xiaochengxu/tree/master/douban-v4