找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

首页 › 教程频道› 小程序开发 › 查看内容

微信小程序学习点滴《十六》：下拉刷新 上拉加载

作者：模板之家 2018-1-30 09:45 12630人关注

微信 小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善.

上gif:

 

 

原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法.

1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字.

2.上拉加载,在滑动到底部时,bindscrolltolower被调用,我这里是页数加一,根据自己的业务逻辑修改,然后将获取到的集合添加到scroll-view的数据集合里即可.

 

上代码:

1.index.js


				
    
					
  1. 
						//index.js 
    2. 
					
  2. 
						//获取应用实例 
    3. 
					
  3. 
						var app = getApp() 
    4. 
					
  4. 
						Page({ 
    5. 
					
  5. 
						data: { 
    6. 
					
  6. 
						words: [], 
    7. 
					
  7. 
						windowHeight: 0,//获取屏幕高度 
    8. 
					
  8. 
						refreshHeight: 0,//获取高度 
    9. 
					
  9. 
						refreshing: false,//是否在刷新中 
    10. 
					
  10. 
						refreshAnimation: {}, //加载更多旋转动画数据 
    11. 
					
  11. 
						clientY: 0,//触摸时Y轴坐标 
    12. 
					
  12. 
						}, 
    13. 
					
  13. 
						onLoad: function () { 
    14. 
					
  14. 
						var _this = this; 
    15. 
					
  15. 
						//获取屏幕高度 
    16. 
					
  16. 
						wx.getSystemInfo({ 
    17. 
					
  17. 
						success: function (res) { 
    18. 
					
  18. 
						_this.setData({ 
    19. 
					
  19. 
						windowHeight: res.windowHeight 
    20. 
					
  20. 
						}) 
    21. 
					
  21. 
						console.log("屏幕高度: " + res.windowHeight) 
    22. 
					
  22. 
						} 
    23. 
					
  23. 
						}) 
    24. 
					
  24. 
						//获取words 
    25. 
					
  25. 
						wx.request({ 
    26. 
					
  26. 
						url: 'http://api.avatardata.cn/ChengYu/Search?key=77f072d28eb141c8b6dda145ca364b92&keyWord=好', 
    27. 
					
  27. 
						complete: function (res) { 
    28. 
					
  28. 
						if (res.data.reason == 'Succes') { 
    29. 
					
  29. 
						_this.setData({ 
    30. 
					
  30. 
						words: res.data.result 
    31. 
					
  31. 
						}) 
    32. 
					
  32. 
						} 
    33. 
					
  33. 
						} 
    34. 
					
  34. 
						}) 
    35. 
					
  35. 
						}, 
    36. 
					
  36. 
						scroll: function () { 
    37. 
					
  37. 
						console.log("滑动了...") 
    38. 
					
  38. 
						}, 
    39. 
					
  39. 
						lower: function () { 
    40. 
					
  40. 
						var start = 0; 
    41. 
					
  41. 
						start += 1; 
    42. 
					
  42. 
						console.log("加载了...") 
    43. 
					
  43. 
						var _this = this; 
    44. 
					
  44. 
						wx.request({ 
    45. 
					
  45. 
						url: 'http://api.avatardata.cn/ChengYu/Search', 
    46. 
					
  46. 
						data: { 
    47. 
					
  47. 
						key: '77f072d28eb141c8b6dda145ca364b92', keyWord: '好', page: start 
    48. 
					
  48. 
						}, 
    49. 
					
  49. 
						complete: function (res) { 
    50. 
					
  50. 
						if (res.data.reason == 'Succes') { 
    51. 
					
  51. 
						var words = _this.data.words.concat(res.data.result); 
    52. 
					
  52. 
						_this.setData({ 
    53. 
					
  53. 
						words: words 
    54. 
					
  54. 
						}) 
    55. 
					
  55. 
						} 
    56. 
					
  56. 
						} 
    57. 
					
  57. 
						}) 
    58. 
					
  58. 
						}, 
    59. 
					
  59. 
						upper: function () { 
    60. 
					
  60. 
						console.log("下拉了....") 
    61. 
					
  61. 
						//获取用户Y轴下拉的位移 
    62. 
					
  62. 
						 
    63. 
					
  63. 
						 
                 
                邀请 
              
     
               
              
     
            
             
                        
     
              
    

    


    路过    
    		



    雷人    
    		



    握手    
    		



    鲜花    
    		



    鸡蛋    
    		

    

    



 
            
    

            
     
            
    
                  原作者: 模板之家 
                  来自: 网络收集 
                   
                   
                              
    
                        
          
          
    
  
      
  
  	
    

    上一篇：微信小程序的小练手：活动列表及排序
    下一篇：小技巧四则： 点击空白处隐藏input，下拉刷新，全局变量
    
  
        
      
      
    
    
       
       
      

    
  	
    
       
    全部回复(0)
    
            
    
  
     
    
     
     
    
      
        
    
      
  
    

    

        
    
    
    
     
    

    

    


    

    
                
    
           
    
    
    
    
    
    

   
    
         

    
     
        
  
     
  
    
    
     
      
     
    
    
  
    




     
  
     

    

 

 

     




    
    

    



    
  
    
  
    
    
    
      
    Copyright © Comsenz Inc. Powered by Discuz!X3.5 


 蜀ICP备12013697号 
    
    
    
    
    
       
     微信：xu08290201   QQ：75283535