devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序触底加载分页_小程序 scroll-view分页

作者：小小林熬夜学编程 | 2024-02-16 21:46:39

赞

踩

小程序 scroll-view分页

**

微信小程序触底加载分页

**
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
      })
    }
   
  },

})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

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,
              })
            }
      
      
          }
        })
     
        
    },

})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/96976
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号