微信小程序下拉刷新/上拉加载更多

最新推荐文章于 2024-05-17 06:17:38 发布
最新推荐文章于 2024-05-17 06:17:38 发布
阅读量10w+ 收藏 113
点赞数 23
分类专栏： 微信小程序 文章标签： json 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruffaim/article/details/78839214
版权

查看文档，在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部，

在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效，在单独页面设置则对当前页面有效；

看一下json文件

 

"enablePullDownRefresh": true,


注意这里的true是布尔型而不是字符；

 

有同学说设置完之后可以下拉，但是看不到图标；

在app.json中这样设置；

这样下拉之后就可以看到了；

每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数

直接上代码:

page为全局变量，用在在后面的加载请求，这里要和编写数据接口的同事讨论好请求；

 


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  爱开车的彬哥
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    23
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    113
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  35
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
微信小程序下拉筛选菜单WXDropDownMenu组件

				
			

			

				

					03-29
				

			

		

		

			
				
先来看下效果图：
(此图片来源于网络，如有侵权，请联系删除! )
思路与步骤：
布局方面，整体使用dl来写，二级包在dd中，用ul li来写；交互方面，点击某一级菜单，关闭兄弟子菜单，点击某子菜单关闭所有菜单。
1.使用dt做出第一级菜单
2.使用dd嵌套第二级菜单，初始隐藏、position为absolute，使用z-index浮出页面层
/*总菜单容器*/
.menu {
     display: block;
    height: 38px;
}
 
/*一级菜单*/
.menu dt {
    font-size: 15px;
    float: left;
    /*hac

			
		

	



                

              
                



	

		

			

				
					
uni-app 数据上拉加载更多功能

				
			

			

				

					qq_52099965的博客
				

				

					10-25
					
					806
					
				

			

		

		

			
				
uni-app 数据上拉加载更多功能

			
		

	



                


  
              

                


	

		

			

				
					
2024年最全微信小程序之加载更多（分页加载）实例-——-微信小程序实战系列，面试题bug的生命周期

					
最新发布

				
			

			

				

					2401_84562768的博客
				

				

					05-17
					
					773
					
				

			

		

		

			
				
总之啊，家里没矿的同学们，如果你们想以后的日子过得好一些，多想想你们的业余时间怎么安排吧；技术方面的提升肯定是重中之重，但是技术外的一些“软实力”也不能完全忽视，很多时候升职确实是因为你的技术足够强，但也与你的“软实力”密切相关在这我也分享一份大佬自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅并给下属员工学习的精品资料。

			
		

	





	

		

			

				
					
微信小程序实现上拉加载更多

				
			

			

				

					m0_52244931的博客
				

				

					03-05
					
					1700
					
				

			

		

		

			
				
【代码】微信小程序实现上拉加载更多。

			
		

	



		

			
		



	

		

			

				
					
微信小程序实现上拉触底（后台分页）加载

				
			

			

				

					zhmoon的博客
				

				

					09-03
					
					2061
					
				

			

		

		

			
				
这篇文章是用的laravel8+微信小程序。
要实现微信小程序下拉加载首先我们要缕清他的思路。在我看来，可以这样实现：首先我们给js一个data属性page，page的值默认为1，也就是第一页。然后加载出第一页后 page自增1 此时下滑触底可以触发触底事件：加载下一页，再来一次循环，并且我们需要每次在接到数据时判断数据是否为空，如果为空，直接给出数据已经到底了。
具体代码：
Page({

	data: {
		lists:[]
		//给page一个初始值用来获取第一页数据
  		page:1,
  

			
		

	





	

		

			

				
					
微信小程序 下拉刷新/上拉加载更多 （上拉加载更多怎么实现）

				
			

			

				

					朵拉多的博客
				

				

					05-11
					
					2907
					
				

			

		

		

			
				
实现原理：

下拉刷新：由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新。
2. 上拉加载更多（页面上拉触底事件）：新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染，小程序在保持原数据显示不变的基础上，自动追加渲染显示新数据。

注意（小程序官方有说明）：

上拉加载更多 不要用scroll-view,用普通的view即可。
下拉刷新需要在 当前页面.json 里配置

{
   "enablePullDownRefresh": true 
}


p

			
		

	





	

		

			

				
					
微信小程序下拉刷新上拉加载组件

				
			

			

				

					01-27
				

			

		

		

			
				
基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱：. 只要...

			
		

	





	

		

			

				
					
小程序swiper实现tab切换--下拉刷新、上拉加载更多.zip

				
			

			

				

					07-23
				

			

		

		

			
				
本项目中，开发者利用Swiper和Swiper-Item组件，结合下拉刷新和上拉加载更多的功能，构建了一个交互性强、用户体验良好的小程序界面。  1. **Swiper组件**：  Swiper是微信小程序中的一个容器组件，可以用来展示一...

			
		

	





	

		

			

				
					
微信小程序下拉刷新上拉加载组件.zip

				
			

			

				

					01-11
				

			

		

		

			
				
本压缩包“微信小程序下拉刷新上拉加载组件.zip”包含了一个关于微信小程序中两个关键交互功能——下拉刷新（Pull-down Refresh）和上拉加载更多（Load More on Pull-up）的实现资源。这两个功能是提升用户体验的...

			
		

	





	

		

			

				
					
微信小程序实现列表下拉刷新上拉加载

				
			

			

				

					08-28
				

			

		

		

			
				
微信小程序实现列表下拉刷新上拉加载是指在微信小程序中实现列表的下拉刷新和上拉加载功能，以便于用户更方便地浏览和加载列表数据。下面将详细介绍微信小程序实现列表下拉刷新上拉加载的方法和步骤。  一、微信小...

			
		

	





	

		

			

				
					
Android-Alvin#Android-LearningNotes#微信小程序下拉刷新-上拉加载更多1

				
			

			

				

					07-25
				

			

		

		

			
				
// 下拉刷新// 显示顶部刷新图标success: function (res) {// 隐藏导航栏加载框// 停止下拉动作上拉加载更多：* 页面上拉触底事件

			
		

	





	

		

			

				
					
微信小程序-上拉加载更多和下拉刷新

				
			

			

				

					CY的博客
				

				

					06-19
					
					1877
					
				

			

		

		

			
				
微信小程序-上拉加载更多和下拉刷新

			
		

	





	

		

			

				
					
微信小程序页面事件 - 下拉刷新与上拉触底

				
			

			

				

					m0_61631823的博客
				

				

					03-22
					
					7496
					
				

			

		

		

			
				
一、下拉刷新

1.概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

2. 启用下拉刷新

启用下拉刷新有两种方式：

①全局开启下拉刷新



在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true



②局部开启下拉刷新



在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true



在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下

			
		

	





	

		

			

				
					
微信小程序向上拉触底加载更多数据

				
			

			

				

					柳林风的博客
				

				

					10-15
					
					2076
					
				

			

		

		

			
				
准备工作
一、mock数据
微信小程序为前端程序框架，无法实现API数据，需要自己mock出数据，这里采用mock-server，具体使用方法请参考文档提供的链接，接口实现如下
Mock.mock(/mock/, (ctx) => {
    let mockData = ctx.query
    let start = mockData.start
    let getCount = ...

			
		

	





	

		

			

				
					
微信小程序实现上拉加载（分页加载）

				
			

			

				

					xiaoma19941027的博客
				

				

					06-30
					
					4041
					
				

			

		

		

			
				
转载于：https://blog.csdn.net/weixin_44836808/article/details/105884258
本文将简单介绍微信小程序如何实现上拉加载（分页加载）
主要思想是：当用户滑倒页面底部，或是距离页面底部x时(x可自定义)，触发页面的触底监听函数，然后调用开发者设计的触底函数，进行相关请求。其中，请求第二页的数据时，会对返回的数组与原有的数组合并，并把新数组发送到data中，渲染到页面。
小程序端js代码如下
 data: {
      //消息列表数据
      no

			
		

	





	

		

			

				
					
小程序基本命令

				
			

			

				

					aiven1637的博客
				

				

					10-30
					
					3271
					
				

			

		

		

			
				
onLoad: function () {
// 生命周期函数--监听页面加载


onReady: function () {
// 生命周期函数--监听页面初次渲染完成

},
onShow: function () {
// 生命周期函数--监听页面显示

},
onHide: function () {
// 生命周期函数--监...

			
		

	





	

		

			

				
					
微信小程序 onReachBottom 上拉触底加载 没触发

				
			

			

				

					Dove言和 
				

				

					08-18
					
					3115
					
				

			

		

		

			
				
在数据渲染到小程序端的时候，大量数据会造成页面卡顿，严重的话会卡死，增大服务器压力


小程序自带能检测到到用户触底事件的函数

小程序自带能检测到到用户触底事件的函数

小程序自带能检测到到用户触底事件的函数

开发中可能会遇到写个底部触发事件，但是运行却没生效？


 //底部触发
   onReachBottom: function () {
     wx.showLoading({
       title: '加载中...',
     })
    console.log('到底了');
..

			
		

	





	

		

			

				
					
微信小程序三种授权登录以及授权登录流程讲解

					
热门推荐

				
			

			

				

					万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
				

				

					10-21
					
					1万+
					
				

			

		

		

			
				
微信小程序是我们平常生活中密不可分的东西，小程序中的微信授权登录是怎么实现的你了解多少？看完这篇文章绝对让你收获满满！！

			
		

	





	

		

			

				
					
小白学习微信小程序的下拉刷新和上拉加载更多

				
			

			

				

					吃不胖.
				

				

					09-12
					
					2015
					
				

			

		

		

			
				
<image class="refreshing-icon" src="../../images/loading@2x.gif"></image> <view class="refreshing-text">正在刷新</view>

			
		

	





	

		

			

				
					
微信小程序下拉刷新,上拉加载组件

				
			

			

				

					08-08
				

			

		

		

			
				
微信小程序提供了下拉刷新和上拉加载的组件，可以方便地实现这些功能。下面是一个简单的示例代码：

1. 在页面的json文件中，添加下拉刷新和上拉加载的配置：

```json
{
  "usingComponents": {
    "scroll-view": "/path/to/scroll-view-component"
  },
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50
}
```

2. 在页面的wxml文件中，使用scroll-view组件包裹需要实现下拉刷新和上拉加载的内容：

```html
<scroll-view class="content" scroll-y="true" bindscrolltolower="loadMoreData" bindscrolltoupper="refreshData">
  <!-- 内容 -->
</scroll-view>
```

3. 在页面的js文件中，实现下拉刷新和上拉加载的逻辑：

```javascript
Page({
  data: {
    // 数据
  },
  onPullDownRefresh: function() {
    // 下拉刷新逻辑
    // 更新数据
    wx.stopPullDownRefresh(); // 停止下拉刷新
  },
  loadMoreData: function() {
    // 上拉加载逻辑
    // 加载更多数据
  }
})
```

这样就完成了微信小程序的下拉刷新和上拉加载功能的实现。你可以根据实际需求自定义样式和逻辑。注意，在使用上拉加载时，需要在页面的js文件中监听scroll-view组件的bindscrolltolower事件，并在事件回调中实现加载更多数据的逻辑。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 35

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值