微信小程序实现滚动分页加载更多-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

微信小程序实现滚动分页加载更多

admin • 2021-12-30 00:59:09 • 前端 • 阅读589
[导读]：wxml: view class=myScroll style=float:left; scroll-view scroll-y=true style=height:{{height}}px bindscrolltolower=lower !--分类 下部分 图文列表 -- view class=appointment view class=app-moduler navigator url=/pages/detail/detail?id={{item.id}} wx:for={{imageList}} ...
wxml:



	



	            



	               



	                           



	                             



	                               



	                                 



	                                 



	                                   



	                                 



	                                 



	                                    {{item.title}}   



	                                 



	                                 



	                                   



	                                     



	                                   



	                                   {{item.description}}



	                                 



	                               



	                                



	                              



	                           



	           



	             



	   

js:




	

		data: { 

	

		    imageList: [ ],

	

		    ids:[0,0,0,0,0],

	

		    inputValue: '', //搜索的内容

	

		    height:0

	

		  }

	

		,

	

		onLoad(){

	

		 // 初始化所有图片的图片列表

	

		            wx.request({

	

		              url: '数据接口',

	

		              data: {

	

		                pagenumber: 1,

	

		                pagesize: 6,

	

		              },

	

		              method: 'POST',

	

		              header: {

	

		                'content-type': 'application/x-www-form-urlencoded' // 默认值

	

		              },

	

		              success(res) {

	

		                // var myOldData=that.data.imageList;

	

		                var mydata = res.data.data;

	

		                that.setData({

	

		                  imageList: mydata

	

		                })

	

		                

	

		              }

	

		            })

	

		            // 初始化图片列表  结束

	

		    // 初始化 高度   

	

		    wx.getSystemInfo({

	

		      success: (res) => {

	

		         

	

		        that.setData({

	

		          height: res.windowHeight

	

		        })

	

		      }

	

		    })

	

		  },

	

		,

	

		  lower() {

	

		    var that = this;

	

		    var result = that.data.imageList;

	

		    var pagenumber=result.length/6+1;

	

		    // 加载图片列表

	

		    if (pagenumber < 2) {

	

		      return false;

	

		    } else {

	

		    wx.request({

	

		      url: '数据接口',

	

		      data: {

	

		        pagenumber: pagenumber,

	

		        pagesize: 6,

	

		        ids:that.data.ids,

	

		        title: that.data.inputValue

	

		      },

	

		      method: 'POST',

	

		      header: {

	

		        'content-type': 'application/x-www-form-urlencoded' // 默认值

	

		      },

	

		      success(res) {

	

		        // var myOldData=that.data.imageList;

	

		        var mydata = res.data.data;

	

		        var cont = result.concat(mydata);

	

		        if (mydata.length==0){

	

		          wx.showToast({ //如果全部加载完成了也弹一个框

	

		            title: '没有数据了',

	

		            image:"/images/warn.png",

	

		            duration: 300

	

		          });

	

		          return false;

	

		         }

	

		        if (cont.length >= 100) {

	

		          wx.showToast({ //如果全部加载完成了也弹一个框

	

		            title: '加载的太多了',

	

		            icon: 'success',

	

		            duration: 300

	

		          });

	

		          return false;

	

		        } else {

	

		          wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 

	

		            title: '加载中',

	

		            icon: 'loading',

	

		          });

	

		          setTimeout(() => {

	

		            that.setData({

	

		              imageList: cont

	

		            });

	

		            wx.hideLoading();

	

		          }, 1500)

	

		        }

	

		      }

	

		    })



加载图片列表 结束 <br> }
                

                  

                    本文来自E先生的博客，如若转载，请注明出处：https://javajz.cn
                  

                

              

              

                

                  微信,小程序,微信小程序,滚动分页,滚动,分页,加
                

                

                  
                  
                  

                    打赏
                    
                      
                        微信扫一扫微信扫一扫
                      
                    
                  

                

                

                

                  

                    

                      admin
                    

                    

                      

                        
                          
                          
                        
                      

                      
                    

                  

                

                

                  

                    
                      常用及我用的移动端适配解决方案。 非常nice
                    
                    

                      « 上一篇
                    

                  

                  

                    
                      Vue首页加载过慢 解决方案. 已完成部署
                    
                    

                      下一篇 »
                    

                  

                

                
相关推荐

                
              

              

                

  

    
留言区

  

  

    

      

        

          联系人：
        

        

          手   机：
        

      

      

        

          内   容：
        

        

          验证码：
          
        

      

      

        
      

    

  





  
历史留言





  





              

            

          

        

        

      

    

    

  

      

          
          

              
           
              

                  鲁ICP备20021488号 
 
                
              

          

          

              

                  
                      
                      
                  
                  
                      
                      
                  
                  
                      
                      
                  
               
              

          

      

  










欢迎加Easy的QQ