微信小程序-mpvue-下拉加载，上滑刷新无法触发onReachBottom，onPullDownRefresh

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

遇到的坑，记录一下，

问题.onReachBottom，onPullDownRefresh无法触发

解决办法：需要将onReachBottom，onPullDownRefresh放到与methods同级的位置，否则无法触发。

具体使用方法：

第一步：定义enablePullDownRefresh，backgroundTextStyle

如果单独引用，则在对应的main.json文件中添加

"enablePullDownRefresh": true,

  "backgroundTextStyle": "dark", // 或者light，看自己需求

如果在全局中引入，则在app.json中引入

 

第二步： 在需要使用的.vue文件中引入onReachBottom，onPullDownRefresh。记得与methods同级!

 

wly_er
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue滚动触底触发事件容器封装
旭哥的博客
03-08 1468
容器内内容足够多时才会显示滚动条，发生滚动且到达距离底部指定距离后将会触发onReachBottom事件。 容器高度由height控制。 距离底部距离由distance控制。 其他需求请自行修改相关代码。 一、封装组件代码 <template> <div class="z-scoll-view-wrapper" :style="{ height: height + 'px' }"> <div class="z-scoll-view-content" :style.
uniapp的onPullDownRefresh失效 不执行
starstarstarl的博客
04-11 1628
里，找到的当前页面的pages节点，并在。
不止步于 vue ，探索 uni-app 的生命周期
Create value with coding
04-03 3667
首先，在Vue中每个实例都会经历一系列的初始化步骤。当它被创建时，从设置数据到编译模板，再到将实例挂载到DOM，最后在数据变化时更新DOM。这个过程被称为Vue实例的生命周期，它们在经历这个创建和
小程序onPullDownRefresh下拉刷新时提高用户体验的技巧
LzzMandy的博客
12-28 791
1、在page.json文件中开启下拉刷新设置 { "pages" : [ { "path" : "pages/index/index", "style" : { "enablePullDownRefresh" : true // 开启单页面下拉刷新功能 } } , ... 2、在index.vue页面中监听刷新
vue的生命周期跟小程序的生命周期
qq_38368356的博客
12-22 522
// vue 生命周期 beforeCreate () { console.log(‘vue [page-blog] beforeCreate’) }, created () { console.log(‘vue [page-blog] created’) }, beforeMount () { console.log(‘vue [page-blog] beforeMount’) }, mount...
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
08-31
通过结合以上知识点，微信小程序实现了在 `scroll-view` 中的上拉加载和下拉刷新功能。当用户向下滚动到页面底部时，新的数据会被加载；而当用户下拉页面时，现有数据会被刷新。这样的设计极大地提升了用户体验，...
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
总之，通过结合`scroll-view`组件和微信小程序的API，我们可以轻松实现具有下拉刷新功能的界面，为用户提供更加流畅的数据更新体验。在实践中，开发者可以根据需求调整和扩展这个功能，打造更加个性化的交互设计。
【微信小程序-毕设期末大作业】源码电商类微信小程序
最新发布
04-25
【微信小程序-毕设期末大作业】源码电商类微信小程序 【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序...
小北微信小程序教程之 -- 下拉刷新和上拉加载
03-29
下拉刷新和上拉加载是两个独立又密切联系的功能，上拉加载需要服务器端有分页机制，而下拉刷新除了重新获取信息外还要对之前的状态和页码进行初始化。 一个一个来吧。 服务器端分页   其实yii2早就已经为我们准备好...
【实习小记】onPullDownRefresh（）生命周期和ref
qq_51632935的博客
08-15 486
实习生活中的小笔记
微信小程序：enablePullDownRefresh、onReachBottomDistance 、动态设置窗口的背景色、动态设置下拉背景字体
weixin_38909589的博客
05-22 1万+
一、enablePullDownRefresh 1、下拉刷新enablePullDownRefresh的支持 单页面配置json文件 { "backgroundTextStyle": "dark" } app.json配置（所有页面都带有下拉刷新功能） { "window": { "enablePullDownRefresh": true } } 2、设置...
小程序onPullDownRefresh触发onReachBottom的解决方法
GoldenLegs的博客
06-30 2094
问题 下拉刷新,上滑加载是比较常见的数据刷新方式, 本人在小程序开发过程中遇到如题这个坑点,两个交互同时触发导致数据重复渲染 解决方法 在onPullDownRefresh中加个状态A, onReachBottom中根据状态A来判断是否需要加载数据, 参考如下: onReachBottom: function() { //没有下拉状态才进行加载数据 !this.data.pullst...
ios微信小程序下拉刷新怎么配_微信小程序下拉加载和上拉刷新两种实现方法详解...
weixin_36236823的博客
12-28 434
方法一：onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里设置window属性设置js里onPullDownRefresh和onReachBottom方法下拉加载说明：当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。onPullDownRefresh(){console.log('----...
微信小程序上拉加载，下拉刷新实现方法
热门推荐
bjnihao的专栏
12-15 2万+
微信小程序下拉刷新上拉加载的两种实现方法方法1利用”onPullDownRefresh”和”onReachBottom”方法实现小程序下拉刷新上拉加载设置window中属性enablePullDownRefresh为true 属性 类型 描述 enablePullDownRefresh Boolean 是否开启下拉刷新，详见页面相关事件处理函数。 设置注册页面中Page中函数
onPullDownRefresh函数没有被正确执行
weixin_30737433的博客
11-06 242
原因 问题原因很多，我遇到的这个问题的原因是： 页面有两个同名的onPullDownRefresh函数，导致只执行最后的一个。 解决 只留一个onPullDownRefresh函数 转载于:https://www.cnblogs.com/Zev_Fung/p/9913258.html...
uniapp onReachBottom不触发
qq_41687724的博客
02-24 7015
在子组件里是不会触发的 要写在父组件中 父组件中这样写： <goods ref="goods"></goods> onReachBottom(){ console.log('onReachBottom1111111111'); if(this.$refs.goods){ if(this.$refs.goods.status === 'loadmore') { this.$refs.goods.getNoSaleList(); } } }
mpvue中指定某个页面下拉刷新
weixin_44015248的博客
12-31 2486
指定页面下拉刷新，在main.js写的不起效果： export default{ config:{ enablePullDownRefresh:true } } 解决： 一、在它的目录下建一个main.json文件夹 二、文件内容（json文件不要注释，会报错） 三、index.vue script里面的 methods: { async getList () { ...
微信小程序实战：上拉加载和下拉刷新
weixin_45706073的博客
03-29 315
简介：小程序上拉加载和下拉刷新应该是项目中经常用到的功能。下面的onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先了解下两个官方API 上拉加载onReachBottom 和 下拉刷新onPullDownRefresh。 一、在你的当前json文件里设置window属性 "enablePullDownRefresh": true, 二、代码示范 (注释的很清楚) 上拉加载 onReachBottom //页面上拉加载 onReachBottom(
微信小程序下拉加载和上拉刷新两种实现方法
Picasso_1990的博客
09-04 163
方法一：onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onReachBottom方法 下拉加载说明： 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。 onPullDownRefresh...
微信小程序下拉刷新,上拉加载组件
08-08
微信小程序提供了下拉刷新和上拉加载的组件，可以方便地实现这些功能。下面是一个简单的示例代码： 1. 在页面的json文件中，添加下拉刷新和上拉加载的配置： ```json { "usingComponents": { "scroll-view": "/...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值