上拉加载（分页加载） 

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

业务需求：

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

必备参数：

（1）pageindex: 1 //第几次加载
（2）callbackcount: 15 //需要返回数据的个数

其他参数：

根据接口的所需参数 

实现原理：

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

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

示例：
wxml:

<view class="search"> 
 <view class="search-bar"> 
 <view class="search-wrap"> 
  <icon type="search" size="16" class="icon-search" /> 
  <input type="text" placeholder="请输入搜索内容" class="search-input" name="searchKeyword" bindinput="bindKeywordInput" value="{{searchKeyword}}" /> 
 </view> 
 <view class="search-cancel" bindtap="keywordSearch">搜索</view> 
 </view> 
 <view class="search-result"> 
 <scroll-view scroll-y="true" bindscrolltolower="searchScrollLower"> 
  <view class="result-item" wx:for="{{searchSongList}}" wx:key="unique" data-data="{{item}}" > 
  <view class="icon{{item.isonly=='0' ? ' nocopyright' : ''}}"></view> 
  <text class="title">{{item.songname}}</text> 
  <view class="subtitle"> 
   <text wx:for="{{item.singer}}" wx:key="unique">{{item.name}}</text> 
  </view> 
  </view> 
  <view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view> 
  <view class="loading complete" hidden="{{!searchLoadingComplete}}">已加载全部</view> 
 </scroll-view> 
 </view> 
</view> 

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(); 
 } 
 } 
}) 

util.js:

function getSearchMusic(keyword, pageindex, callbackcount, callback){ 
 wx.request({ 
 url: 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp', 
 data: { 
  g_tk: 5381, 
  uin: 0, 
  format: 'json', 
  inCharset: 'utf-8', 
  outCharset: 'utf-8', 
  notice: 0, 
  platform: 'h5', 
  needNewCode: 1, 
  w: keyword, 
  zhidaqu: 1, 
  catZhida: 1, 
  t: 0, 
  flag: 1, 
  ie: 'utf-8', 
  sem: 1, 
  aggr: 0, 
  perpage: 20, 
  n: callbackcount, //返回数据的个数 
  p: pageindex, 
  remoteplace: 'txt.mqq.all', 
  _: Date.now() 
 }, 
 method: 'GET', 
 header: {'content-Type': 'application/json'}, 
 success: function(res){ 
  if(res.statusCode == 200){ 
  callback(res.data); 
  } 
 } 
 }) 
} 
 
module.exports = { 
 getSearchMusic: getSearchMusic 
} 

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(../../images/icon-loading.png) no-repeat; 
 background-size: contain; 
 animation: rotate 1s linear infinite; 
} 
.loading.complete:before{ 
 display: none; 
} 

运行：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# 微信小程序  # 上拉加载  # 分页加载  # 微信小程序分页加载的实例代码  # 微信小程序云开发实现数据添加、查询和分页  # 微信小程序模板之分页滑动栏  # 微信小程序实现移动端滑动分页效果（ajax）  # 微信小程序实现分页加载效果  # 微信小程序实现瀑布流分页滚动加载  # 微信小程序实现下拉刷新和上拉分页效果的方法详解  # 微信小程序之搜索分页功能的实现代码  # 微信小程序实现分页查询详解  # 微信小程序实现本地分页加载  # 加载  # 设为  # 几次  # 就会  # 输入框  # 并把  # 数为  # 基础上  # 所需  # 请输入  # 要看  # 分页  # 搜索结果  # 只看  # 再加  # 再把  # 回调  # 大家多多  # 为空  # 再往 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  高防服务器租用指南：配置选择与快速部署攻略  ,南京靠谱的征婚网站？  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  Laravel storage目录权限问题_Laravel文件写入权限设置  如何在宝塔面板中创建新站点？  Laravel Fortify是什么，和Jetstream有什么关系  原生JS实现图片轮播切换效果  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  开心动漫网站制作软件下载,十分开心动画为何停播？  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  奇安信“盘古石”团队突破 iOS 26.1 提权  如何快速搭建自助建站会员专属系统？  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？  使用豆包 AI 辅助进行简单网页 HTML 结构设计  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  如何在Windows服务器上快速搭建网站？  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  Laravel如何创建自定义Artisan命令？（代码示例）  如何在服务器上配置二级域名建站？  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  香港服务器部署网站为何提示未备案？  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  北京企业网站设计制作公司,北京铁路集团官方网站？  中山网站制作网页,中山新生登记系统登记流程？  简单实现Android文件上传  ,在苏州找工作，上哪个网站比较好？  如何在 Pandas 中基于一列条件计算另一列的分组均值  Laravel怎么连接多个数据库_Laravel多数据库连接配置  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  Python制作简易注册登录系统  Laravel如何使用Telescope进行调试？（安装和使用教程）  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  ,网页ppt怎么弄成自己的ppt？  jQuery中的100个技巧汇总  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  黑客如何通过漏洞一步步攻陷网站服务器？  Linux系统运维自动化项目教程_Ansible批量管理实战  如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】