微信小程序触底加载分页

最新推荐文章于 2024-08-01 13:39:52 发布
最新推荐文章于 2024-08-01 13:39:52 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45472548/article/details/107522387
版权

**

微信小程序触底加载分页

**
1、scroll-view组件触底加载分页案例：
微信小程序前台：
JS:

  Page({

  data: {
    shaidanpages:1,//晒单开始页数
    allPagesshaidan: '',//晒单总页数
    shaidans:[],

},

onLoad: function (options) {
 var pages=that.data.shaidanpages;
    that.shaidan(pages);
},

//精选晒单
shaidan:function(e){
  var pages=e;
  var that=this;
  var uid = wx.getStorageSync('uid');
 //晒单列表
 wx.request({
  url: 'https://www.dongjiaju.net/index.php?s=/api/discover/shaidan',
  method: 'POST',
  data: {
     uid:uid,
    pages:pages,
    limit:that.data.limit,
  },
    //参数为键值对字符串
  header: {
    //设置参数内容类型为x-www-form-urlencoded
    'content-type':'application/x-www-form-urlencoded',
    'Accept': 'application/json'
  },
  success: function (res) {
    var arr =that.data.shaidans;
        res.data.list.forEach(function (value) {
          arr.push(value)
        })
        if (res.data.list.length != 0) {
          that.setData({
            shaidans:arr,
            allPagesshaidan:res.data.pagecount,
            shaidanpages:res.data.page,
          })
     }
  }
});
},

//晒单触底刷新
  bindshaidan:function(){
    var pages=this.data.shaidanpages;
    var allPagesshaidan=this.data.allPagesshaidan;
    if(allPagesshaidan>pages)
    {
      var page= ++pages;
      this.shaidan(page);
    }
    else
    {
      wx.showToast({
        title: '没有更多了！',
        icon: 'success',
        duration: 2000
      })
    }
   
  },

})

WXML:

 <!-- 精选菜单-->
   <swiper-item>
	    <scroll-view scroll-y="true" style="height: {{clientHeight?clientHeight+'px':'auto'}};" class="shangpinggundo" bindscrolltolower="bindshaidan">
		  <view class='main'>
                                     <view class='pubuliu_contant'>
                                     
                                            <view class='pubuliu' wx:for='{{shaidans}}' >
                                                 <navigator url="/pages/discovers/menudetail/menudetail?id={{item.id}}">
                                                              <view class='img'><image  mode="widthFix" src="{{item.cover}}"></image></view>
                                                              <view class='content'>{{item.description}}</view>
                                                              
                                                                <view  class='author_img' style="margin-right:10rpx;"><image    style="height:34rpx;width:34rpx;border-radius:50%;" src="{{item.header_img}}"></image></view>
                                                                <view class='nichen'>{{item.nickname}}</view>
                                                              
                                                              <view class='adrress'>{{item.diqu}}</view>
                                                 </navigator>
                                                    

                                             </view>

                                                  <button class="button11"  bindtap="submit1" formType="submit">+去晒单</button>

                                      </view>
                                 </view>
                                    <noLoading class="foot_paging" wx:if="{{allPagesshaidan > shaidanpages}}"><image  mode="widthFix" src="/static/images/loading.gif"></image></noLoading>
                                  <view class="footer"></view>
	</scroll-view>
 </swiper-item>

php api代码：

//晒单
	public function shaidan($page=1,$limit=20,$start=0,$field='*',$addition=1,$totalshow=1){
		 $urls=$_SERVER['HTTP_HOST'];
	  $uid=$_POST['uid'];
	  $page=$_POST['pages'];
		 $https="https";
		 $param=input();

		 $param['page'] = intval($param['page']) <1 ? 1 : $param['page'];
			 $param['limit'] = intval($param['limit']) <1 ? $this->_pagesize : $param['limit'];
				 $limit_str = ($limit * ($page-1) + $start) .",".$limit;
					 if($totalshow==1) {
			 $total =Db::name('nc_shaidan')->where('shenhe',1)->order('id desc')->count();
            
								   }
		 $result=Db::name('nc_shaidan')->where('shenhe',1)->order('id desc')->limit($limit_str)->select(); 
		//   $result1=Db::name('nc_shaidan')->where('shenhe',1)->order('id desc')->where('header_img','like','https%')->limit(0,12)->select(); 
		  
		foreach($result as $kk=>$vv){
			 $result[$kk]['cover']="https://$urls/".$vv['cover'];
			 $result[$kk]['description']=mb_substr($vv['description'],0,25,'utf-8').'...';
			
                 if(strpos($vv['header_img'],$https) !== false){ 
              	 $result[$kk]['header_img']=$vv['header_img'];
                  }
                  else{
                  	    	 $result[$kk]['header_img']="https://$urls/".$vv['header_img'];
                  }
          
		}
          	
		$result=array('code'=>1,'msg'=>'数据列表','page'=>$page,'pagecount'=>ceil($total/$limit),'limit'=>$limit,'total'=>$total,'list'=>$result);
	    echo json_encode($result);
	 
		exit();
	}

2、使用onReachBottom来触底加载分页

如果是一个页面含有多个情况，在data里面定义一个变量来判断是哪种情况如type:””,点击哪个情况就给它赋不同的值，然后给每个情况独立的page分页变量在data,如果需要判断当前页数是否大于总页数，也要给每个情况独立的总页数pagecount！
过程：在onReachBottom的方法里面使用type来判断执行的是哪个情况，每次执行页数要加一再执行，然后调用数据请求的方法，属于哪种情况就调用哪个；
案例如下：

JS

  Page({

  data: {
   typess:"",
      pagefg:0,
      pagekj:0,
      pagepl:0,
      pagepx:0,
      allpagepl:0,
      showpl:true,
      srcfg:"",
      select_fengge:"",//选中风格
      kongjianpinlei:"",//选中空间或者品类
},

 /*** 页面上拉触底事件的处理函数*/
  onReachBottom: function () {
    var uid = wx.getStorageSync('uid');
    var typess=this.data.typess;
    var that=this;
    if(typess=="")
    {
  
      var page = this.data.page; 
      var page=page+1 	
      this.setData({			
        page:page
      })
     
  
      var category_id3 = this.data.category_id3;
      var catnames=this.data.catnames;
      var kj=this.data.kj; 
      var list = this.data.list;
      console.log(list);
      console.log(catnames);
      console.log(kj);
      console.log(category_id3);
        wx.request({
          url: 'https://www.dongjiaju.net/index.php?s=/api/index/xiala',
          method: 'POST',
        
          data:{'category_id':category_id3,'pages':page,'uid':uid,'list':list,'catnames':catnames,'kj':kj}, 
          header: {
           
            'content-type':'application/x-www-form-urlencoded',
            'Accept': 'application/json'
          },
  
          success: function (res) {
           if(res.data!=""){
              for (var i = 0; i < res.data.length; i++) {
                that.data.goodslist.push(res.data[i]);
              }
           }

            that.setData({
              goodslist:that.data.goodslist,
              category_id3:category_id3,
            })
          }
        })
  

    }
    else if(typess==1){
      var pagefg=that.data.pagefg;
      pagefg=++pagefg;
      that.setData({
        pagepx:0,
        pagefg:pagefg,
        pagekj:0,
        pagepl:0,
      })
      that.fengge();
     
    }

    else if(typess==2){
      var pagekj=that.data.pagekj;
      pagekj=++pagekj;
      that.setData({
        pagepx:0,
        pagefg:0,
        pagekj:pagekj,
        pagepl:0,
      })
      that.kongjiass();
     
    }

    else if(typess==3){
      var pagepl=that.data.pagepl;
      pagepl=++pagepl;
      that.setData({
        pagepx:0,
        pagefg:0,
        pagekj:0,
        pagepl:pagepl,
      })
      that.tijiao();
     
    }

    else if(typess==4){
      var pagepx=that.data.pagepx;
      pagepx=++pagepx;
      that.setData({
        pagepx:pagepx,
        pagefg:0,
        pagekj:0,
        pagepl:0,
      })
      that.filter();
     
    }
   
  },

  //风格排序
  fengge:function(e){
      var token = wx.getStorageSync('token');
      var uid = wx.getStorageSync('uid');
      var page=this.data.pagefg;
    if(e==undefined)
    {
      var id = wx.getStorageSync('productallflid');
    }
    else {
    var id = e.currentTarget.dataset.id;
    wx.setStorageSync('productallflid',id);
    page=0;
    this.setData({
      pagefg:0,
    })
    }
      var that=this;
      wx.request({
          url: 'https://www.dongjiaju.net/index.php?s=/api/index/fenggegoods',
          method: 'POST',
            //参数为键值对字符串
          data:{'pages':page,'uid':uid,'id':id},  
  
          header: {
            //设置参数内容类型为x-www-form-urlencoded
            'content-type':'application/x-www-form-urlencoded',
            'Accept': 'application/json'
          },
  
          success: function (res) {
            if(page>=1)
            {
              if(res.data!=""){
                for (var i = 0; i < res.data.length; i++) {
                  that.data.goodslist.push(res.data[i]);
                }
             }
           
              that.setData({
                goodslist:that.data.goodslist,
                typess:1,
              })
            }
            else{
              that.setData({
                goodslist:res.data,
                typess:1,
              })
            }
            
          }
        })
     
        
    },

//空间排序
  kongjiass:function(e){
      var token = wx.getStorageSync('token');
      var uid = wx.getStorageSync('uid');
      var page=this.data.pagekj;
      if(e==undefined)
      {
        var id = wx.getStorageSync('productallflid');
      }
      else {
      var id = e.currentTarget.dataset.id;
      wx.setStorageSync('productallflid',id);
      page=0;
      this.setData({
        pagekj:0,
      })
      }
      var that=this;
      wx.request({
          url: 'https://www.dongjiaju.net/index.php?s=/api/index/kongjiasort',
          method: 'POST',
            //参数为键值对字符串
          data:{'pages':page,'uid':uid,'id':id,},  
  
          header: {
            //设置参数内容类型为x-www-form-urlencoded
            'content-type':'application/x-www-form-urlencoded',
            'Accept': 'application/json'
          },
  
          success: function (res) {
            if(page>=1)
            {
              if(res.data!=""){
                for (var i = 0; i < res.data.length; i++) {
                  that.data.goodslist.push(res.data[i]);
                }
             }
           
              that.setData({
                goodslist:that.data.goodslist,
                typess:2,
              })
            }
            else{
              that.setData({
                goodslist:res.data,
                typess:2,
              })
            }
      
      
          }
        })
     
        
    },

})
码农PHP666
关注
专栏目录
微信小程序下拉触底分页功能实现
HuLuWa1997的博客
11-22 457
初始数据： data: { pageNum: 1, list: [], totallPages: '' }, 接口调用： getList(){ const that = this Api.request({url: xxx + `?page=${that.data.pageNum}&limit=10`}).then(resp => { if (resp.code == Api.conf.success) { const result = resp.data
微信小程序分页加载功能，结合后端实现上拉底部加载下一页数据，数据加载中和暂无数据提示
coderYYY的博客
01-24 1603
原理其实就是检测触底，就把页码+1，然后对数据进行拼接
微信小程序云开发触底分页
技术需要沉淀，兴国需要科技！
09-16 809
微信小程序触底分页
微信小程序开发中的数据分页和加载更多
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-01 878
在微信小程序的开发过程中，数据分页是一个非常实用的功能，它不仅能够提高应用程序的响应速度，还能优化用户体验。在微信小程序中，可以通过向服务器发送带有分页参数的请求来获取指定页的数据。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。加载更多是一种常见的分页形式，通常用于无限滚动场景，即用户向下滚动页面时自动加载下一页的数据。为了进一步提升用户体验，我们可以增加一些额外的功能，比如拉到底部后显示加载动画、加载完成后的提示等。（每页显示的数据条数）。
微信小程序上拉触底分页加载
巴博尔的学习博客
10-22 378
微信小程序上拉触底分页加载 2020/10/22 data:{ page: 1, //当前页码 endpage: '', //总页码 }, // 列表数据 lists: function () { let self = this; var token = wx.getStorageSync('token');//获取缓存token var timestamp = getTime();//获取当前时间戳 var newToken = jmToken(token,
微信小程序之加载更多（分页加载）实例 —— 微信小程序实战系列（2）
热门推荐
michael的博客
02-24 9万+
上拉加载（分页加载）   当用户打开一个页面时，假设后台数据量庞大时，一次性地返回所有数据给客户端，页面的打开速度就会有所下降，而且用户只看上面的内容而不需要看后面的内容时，也浪费用户流量，基于优化的角度来考虑，后台不要一次性返回所有数据，当用户有需要再往下翻的时候，再加载更加数据出来。   业务需求： 列表滚动到底部时，继续往上拉，加载更多内容   必备参数： （1）pagein
微信小程序实现上拉触底（后台分页）加载
zhmoon的博客
09-03 2107
这篇文章是用的laravel8+微信小程序。 要实现微信小程序下拉加载首先我们要缕清他的思路。在我看来，可以这样实现：首先我们给js一个data属性page，page的值默认为1，也就是第一页。然后加载出第一页后 page自增1 此时下滑触底可以触发触底事件：加载下一页，再来一次循环，并且我们需要每次在接到数据时判断数据是否为空，如果为空，直接给出数据已经到底了。 具体代码： Page({ data: { lists:[] //给page一个初始值用来获取第一页数据 page:1,
微信小程序分页加载的实例代码
08-30
在微信小程序中，分页加载是一项常见的功能，它允许用户逐步加载内容，而不是一次性加载所有数据，从而提高页面加载速度，节省流量，并提供更好的用户体验。本文将深入探讨如何实现微信小程序中的分页加载功能。 ...
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
10-15
微信小程序是腾讯推出的一款不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。同时微信小程序还解决了应用安装太多，占用手机内存等问题。微信小程序提供了丰富的...
微信小程序-如何分页加载数据
01-03
小程序通过数据库读取数据一次最多读取20条，云函数一次最多读取100条，所以如果我们要读取更多的数据就要借助分页加载，通过分次的加载数据，然后将每次获取到的数据拼接起来，就可以在页面显示更多的数据。...
小程序页面内容触底分页加载
weixin_43557426的博客
11-07 3857
调用接口，获取商品信息 &amp;lt;view class='btm'&amp;gt; &amp;lt;view class='btm-tit'&amp;gt;福利中心&amp;lt;/view&amp;gt; &amp;lt;view class='welfare-list'&amp;gt; &amp;lt;view class=&quot;no-data&quot; wx:if=&
LoadDataDemo:微信小程序分页加载数据Demo
05-02
微信小程序分页加载数据 一般小程序做分页加载数据，会做一些下拉加载更多、然后上拉刷新的操作。数据放在一个for循环里去加载，数据源是一个数组对象。在加载下一页数据时，将下一页的数据拼到当前数组后面。这样的确可以实现分页加载数据，但是如果数组中的对象都比较大，那么可能加载个几页数据，这个数组的大小就超过微信的限制了。可能会出现 VM429:1 appDataChange 数据传输长度为 1203320 已经超过最大长度 1048576 的异常。 下面分别使用普通的方式和另一种方法解决来处理数据分页加载的问题。完整项目可以在下载到 效果 说明 这个项目中用来分页的数据都是请求同一段json数据，这段json的数据结构是我自己拼的，实际在应用中，可以根据自己项目需求来分页请求数据。这段的结构为一个data对象，data对象对应的是一个对象数组。数组中每个对象都是一篇文章的信息，嗯，就是高中语文书
微信小程序 上拉触底分页
qq_54337367的博客
05-27 657
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 微信小程序 上拉触底分页 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、微信小程序 生命周期 上拉触底事件 //页面上拉触底事件的处理函数.
微信小程序实现分页加载，触底加载下一页，滚动加载
海贼王某人的博客
03-31 3531
这里我就不写wxml了，就是一个列表循环，直接看js代码逻辑，注释都写在代码后面了，这个方法可以实现无限滚动加载，直到加载完最后一条数据，也可以实现触底没数据后，二次触底可以从新加载刷新，学废了就给个三联把，感谢！ data: { orderList: [], pageSize: 10, pageNum: 1, }, /** * 上拉触底 onReachBottom微信自带的触底函数 */ onReachBottom: function () {
微信小程序实现上拉触底分页加载数据和下拉刷新数据
qq_44741577的博客
03-09 789
微信小程序实现上拉触底分页加载数据和下拉刷新数据
微信小程序——商品上拉触底加载分页
qq_41622983的博客
11-03 410
微信小程序商品分页，直接把项目代码搬过来了 // 上拉触底加载 onReachBottom = function () { if(this.data.page < this.data.lastPage && this.data.pageFlag){ this.rePage() this.data.page += 1 this.setData({ page:this.data.page }) t
微信小程序开发使用onreachBottom实现页面触底加载及分页
weixin_53387347的博客
07-18 2万+
微信小程序开发使用onreachBottom实现页面触底加载及分页
微信小程序如何做触底加载分页功能
狐狸爱吃素
10-27 3487
微信小程序如何做触底加载分页功能的数据。以列表页为例，一页十条，触底则加载下一页。
微信小程序（十七）——实战微信小程序分页加载
欢迎交流PHP和前端知识QQ：634487911
08-14 1224
分页加载功能大家遇到的应该会经常遇到，应用场景也很多，例如微博，QQ，微信朋友圈以及新闻类应用，都会有分页加载的功能，这不仅节省了我们用户的流量，还提升了用户体验。那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。 数据来自于后端（lumen带分页） /** * @todo 获取订单列表 * @return mixed */ publ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值