微信小程序如何翻页加载更多数据并显示

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一，遇到问题

在开发微信小程序：【澳买】这个项目的时候，当用户按关键词搜索某个产品的时候，如果搜索结果比较多，

比如100条或者更多，我们不可能也不应该在手机上都给用户显示出来的，这个时候怎么办呢？

二，解决思路

方案很简单，肯定是要用到翻页的功能了，那问题就转化为在微信小程序里面我们如何实现翻页呢？

首先，我们要充分利用手机手指的翻页功能，比如用户下滑翻到屏幕底部，我们开始加载一下屏的数据，直到

加载完所有的搜索结果，我们再在手机屏幕底部提示用户，已经加载完全部产品数据。

三，技术实施

你等的干货来了，请接好：

1. 微信小程序的已经提供了现成的判断是否翻到页面底部回调函数：

onReachBottom

我们只需要把我们的操作逻辑代码加入这个回调函数即可：

 1 /**
 2    * Called when page reach bottom
 3    */
 4   onReachBottom: function () {
 5    
 6     if ( self.data.nomoreData ) {
 7       this.setData({
 8         showloading: true,
 9         loadingMoreTips: '没有更多商品了'
10       });
11       return;
12     }
13 
14     this.setData({
15       showloading: true,
16     });
17 
18 
19     db.collection('pinfo')
20       .where({
21         cname: db.RegExp({
22           regexp: this.data.searchname,
23           options: 'i'
24         })
25       })
26       .field({
27         _id: true,
28         images: true,
29         cname: true,
30         bname: true,
31       }).skip(self.data.totalItems)
32       .limit(MAX_PAGE_LIMIT)
33       .get({
34         success: function (res) {
35           self.setData({
36             showloading: false,
37           });
38           if (res.data.length > 0) {
39             self.data.totalItems += res.data.length;
40             let pitems = self.data.items;
41             for (let i in res.data) {
42               let pdata = res.data[i];
43               pitems.push({
44                 'id': pdata['_id'],
45                 'barcode': pdata['_id'],
46                 'image': app.globalData.pimage_root + pdata['images'][0],
47                 'name': pdata['cname'],
48                 'brand_name': pdata['bname']
49               });
50             }
51 
52             //console.log('update items');
53             self.setData({
54               items: pitems
55             });
56             
57           } else {
58             self.data.nomoreData = true;
59             self.setData({
60               showloading: false,
61             });
62           }
63         },
64         fail: function (error) {
65           self.setData({
66             showloading: false,
67           });
68         }
69       });
70 
71   },

大家注意到没有，上面的处理逻辑里面用了一个非常重要的变量：

self.data.nomoreData // 用来标识数据是否全部加载完毕

初始化的时候改变量我们赋值是false，在第58行的时候，会判断如果没有数据了，就设置为true了。

page data的初始化代码如下：

 1 /**
 2    * Page initial data
 3    */
 4   data: {
 5     showloading: false,
 6     nomoreData: false,
 7     searchname: '',
 8     totalItems: 0,
 9     items: [],
10     loadingResult: '努力加载...',
11     loadingMoreTips: '玩命加载中...'
12   },