微信小程序数据分页怎么实现

　　实现微信小程序数据分页就像开发小程序一样，需要相应的小程序码，如果没有正确的代码，就没有办法实现数据分页的效果，以下就是代码，希望能够帮助到大家。

　　当用户打开一个小程序页面时，假设后台数据量庞大时，一次*地返回所有数据给客户端，页面的打开速度就会有所下降，而且用户只看上面的内容而不需要看后面的内容时，也浪费用户流量，基于优化的角度来考虑，后台不要一次*返回所有数据，当用户有需要再往下翻的时候，再加载更加数据出来。

　　业务需求：

　　列表滚动到底部时，继续往上拉，加载更多内容

　　必备参数：

　　(1)pageindex: 1 //第几次加载

　　(2)callbackcount: 15 //需要返回数据的个数

　　其他参数：

　　根据接口的所需参数

　　实现原理：

　　当第一次开发调用小程序接口时，2个必备参数传递(第1次加载，需要返回数据的个数为15个)，和其他参数(需要搜索的字符串)给后台，后台返回第一次数据过来。在请求成功的的回调函数中，判断返回的数据是否>0，是，则取出数据，渲染视图层，并把“上拉加载”显示在列表底部;否，则没有数据可取，并把“没有更多”显示在列表底部，同时把“上拉加载”隐藏掉。

　　当用户已经滚动到列表底部(这里使用到小程序提供的scroll-view组件的bindscrolltolower事件)，触发bindscrolltolower事件，参数pageindex+1，再把2个必备参数(第2次加载，需要返回数据的个数为15个)和其他参数(需要搜索的字符串)给后台，后台把其余的数据返回给前台，前台在原来数据的基础上添加数据

　　主要的页面结果如下：

　　1.index.wxml

　　搜索

　　{{item.songname}}

　　{{item.name}}

　　正在载入更多...

　　已加载全部

　　2.index.wxss

　　page{

　　display: flex;

　　flex-direction: column;

　　height: 100%;

　　}

　　/*搜索*/

　　.search{

　　flex: auto;

　　display: flex;

　　flex-direction: column;

　　background: #fff;

　　}

　　.search-bar{

　　flex: none;

　　display: flex;

　　align-items: center;

　　justify-content: space-between;

　　padding: 20rpx;

　　background: #f4f4f4;

　　}

　　.search-wrap{

　　position: relative;

　　flex: auto;

　　display: flex;

　　align-items: center;

　　height: 80rpx;

　　padding: 0 20rpx;

　　background: #fff;

　　border-radius: 6rpx;

　　}

　　.search-wrap .icon-search{

　　margin-right: 10rpx;

　　}

　　.search-wrap .search-input{

　　flex: auto;

　　font-size: 28rpx;

　　}

　　.search-cancel{

　　padding: 0 20rpx;

　　font-size: 28rpx;

　　}

　　/*搜索结果*/

　　.search-result{

　　flex: auto;

　　position: relative;

　　}

　　.search-result scroll-view{

　　position: absolute;

　　bottom: 0;

　　left: 0;

　　right: 0;

　　top: 0;

　　}

　　.result-item{

　　position: relative;

　　display: flex;

　　flex-direction: column;

　　padding: 20rpx 0 20rpx 110rpx;

　　overflow: hidden;

　　border-bottom: 2rpx solid #e5e5e5;

　　}

　　.result-item .media{

　　position: absolute;

　　left: 16rpx;

　　top: 16rpx;

　　width: 80rpx;

　　height: 80rpx;

　　border-radius: 999rpx;

　　}

　　.result-item .title,

　　.result-item .subtitle{

　　overflow: hidden;

　　text-overflow: ellipsis;

　　white-space: nowrap;

　　line-height: 36rpx;

　　}

　　.result-item .title{

　　margin-bottom: 4rpx;

　　color: #000;

　　}

　　.result-item .subtitle{

　　color: #808080;

　　font-size: 24rpx;

　　}

　　.result-item:first-child .subtitle text{

　　margin-right: 20rpx;

　　}

　　.result-item:not(:first-child) .subtitle text:not(:first-child):before{

　　content: '/';

　　margin: 0 8rpx;

　　}

　　.loading{

　　padding: 10rpx;

　　text-align: center;

　　}

　　.loading:before{

　　display: inline-block;

　　margin-right: 5rpx;

　　vertical-align: middle;

　　content: '';

　　width: 40rpx;

　　height: 40rpx;

　　background: url(../index/images/icon-loading.png) no-repeat;

　　background-size: contain;

　　animation: rotate 1s linear infinite;

　　}

　　.loadingplete:before{

　　display: none;

　　}

　　3.index.js

　　var util = require('../../utils/util.js')

　　Page({

　　data: {

　　searchKeyword: '', //需要搜索的字符

　　searchSongList: [], //放置返回数据的数组

　　isFromSearch: true, // 用于判断searchSongList数组是不是空数组，默认true，空的数组

　　searchPageNum: 1, // 设置加载的第几次，默认是第一次

　　callbackcount: 15, //返回数据的个数

　　searchLoading: false, //"上拉加载"的变量，默认false，隐藏

　　searchLoadingComplete: false //“没有数据”的变量，默认false，隐藏

　　},

　　//输入框事件，每输入一个字符，就会触发一次

　　bindKeywordInput: function(e){

　　console.log("输入框事件")

　　this.setData({

　　searchKeyword: e.detail.value

　　})

　　},

　　//搜索，访问网络

　　fetchSearchList: function(){

　　let that = this;

　　let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数

　　searchPageNum = that.data.searchPageNum,//把第几次加载次数作为参数

　　callbackcount =that.data.callbackcount; //返回数据的个数

　　//访问网络

　　util.getSearchMusic(searchKeyword, searchPageNum,callbackcount, function(data){

　　console.log(data)

　　//判断是否有数据，有则取数据

　　if(data.data.song.curnum != 0){

　　let searchList = [];

　　//如果isFromSearch是true从data中取出数据，否则先从原来的数据继续添加

　　that.data.isFromSearch ? searchList=data.data.song.list : searchList=that.data.searchSongList.concat(data.data.song.list)

　　that.setData({

　　searchSongList: searchList, //获取数据数组

　　zhida: data.data.zhida, //存放歌手属*的对象

　　searchLoading: true //把"上拉加载"的变量设为false，显示

　　});

　　//没有数据了，把“没有数据”显示，把“上拉加载”隐藏

　　}else{

　　that.setData({

　　searchLoadingComplete: true, //把“没有数据”设为true，显示

　　searchLoading: false //把"上拉加载"的变量设为false，隐藏

　　});

　　}

　　})

　　},

　　//点击搜索按钮，触发小程序按钮事件

　　keywordSearch: function(e){

　　this.setData({

　　searchPageNum: 1, //第一次加载，设置1

　　searchSongList:[], //放置返回数据的数组,设为空

　　isFromSearch: true, //第一次加载，设置true

　　searchLoading: true, //把"上拉加载"的变量设为true，显示

　　searchLoadingComplete:false //把“没有数据”设为false，隐藏

　　})

　　this.fetchSearchList();

　　},

　　//滚动到底部触发事件

　　searchScrollLower: function(){

　　let that = this;

　　if(that.data.searchLoading && !that.data.searchLoadingComplete){

　　that.setData({

　　searchPageNum: that.data.searchPageNum+1, //每次触发上拉事件，把searchPageNum+1

　　isFromSearch: false //触发到上拉事件，把isFromSearch设为为false

　　});

　　that.fetchSearchList();

　　}

　　}

　　})

　　微信小程序数据分页的介绍和实现数据分页所需要的代码都在文中了，仔细看一遍小编给出的资料，你就可以拿着代码去实现小程序数据分页的功能了，更多资料请关注微信小程序素材网。

　　怎样进行微信小程序数据查询

　　微信小程序数据分析功能概述

　　小程序数据传递怎样进行