微信小程序 带tab的页面 从数据比较多的tab切到数据比较少的tab时 有可能触发onReachBottom 导致数据重复加载

于 2024-04-24 16:10:54 发布
阅读量184 收藏
点赞数 2
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27806371/article/details/138162173
版权 
onReachBottom() {
    //添加pageNum == 1的判断是因为 从tab页比较高的地方切到tab页子集很少的地方可能会直接触发onReachBottom导致数据重复加载
    if (pageNum == 1) return
    ..doing
  },

木毅01
关注
专栏目录
微信小程序 onReachBottom 上拉触底加载 没触发
Dove言和
08-18 3443
在数据渲染到小程序端的时候，大量数据会造成页面卡顿，严重的话会卡死，增大服务器压力 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 开发中可能会遇到写个底部触发事件，但是运行却没生效？ //底部触发 onReachBottom: function () { wx.showLoading({ title: '加载中...', }) console.log('到底了'); ..
【愚公系列】《微信小程序开发解析》002-小程序基础知识
最新发布
时光隧道
07-07 3万+
小程序是一种轻量级应用程序，用户可以在不需要下载安装的情况下直接使用。小程序通常具有较小的体积，快速加载速度，提供类似原生应用的用户体验。
微信小程序tab切换
Ylk_manong的博客
07-30 252
微信小程序tab切换(vue2)写法： 父组件：请求数据 <!-- tobar --> <view> <my-tabs :tabs="tabs" :defaultIndex="defaultIndex" @tabClick="tabClick"/> </view> 父组件方法： export default { data() { return { tabs:[], defaultIndex:0, }; },
解决：微信小程序tab导航栏切换时，由于tab内容高度不一致而触发的触底事件onReachBottom
qq_40685439的博客
09-15 2867
场景：如图所示，不同的tab栏的内容高度不一致，如果由全部的导航栏切换到感觉划算的导航栏时，由于容器高度发生了变化，页面中的onReachBottom方法会触发。 但是实际开发中，我们通常只是希望页面下拉到底部时才会触发此事件，解决办法有很多，例如： 可以在页面中设置onReachBottomDistance来规定下拉到多少距离时才会触发此事件 在这里，使用watch监听的方法来限制onReachBottom事件的触发； 定义一个变量isReachBottom默认值为true data() {
小程序tab切换请求
zhangchengh的博客
06-24 736
1.在tab切换的时候拿到每个tab切换的内容id handleTap: function(e) { let id = e.currentTarget.id; request({url:'/yishenglist',data:{ks_id:id,top_id:'1'}}).then(result=>{ this.setData({ departmentList:result.data.data }) }) if(id){ this.se
微信小程序滚动Tab选项卡：左右可滑动切换
weixin_30772261的博客
12-04 465
最终效果如上。问题： 1、tab标题总共8个，所以一屏无法全部显示。 2、tab内容区左右滑动切换时，tab标题随即做标记（active）。 3、当active的标题不在当前屏显示时，要使其能显示到当前屏中。 一、wxml结构tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。 tab内容可左右滑动切换，使用swiper组件实现 为了偷懒，所以数据都通过wx:f...
解决小程序onReachBottom在同屏只能触发一次的问题
weixin_60261472的博客
08-07 1171
原来是我写的文件页面其实是index里的组件，index页面文件有scroll-view，这个scroll-view还是我上个星期写的···居然忘记了。设置了"onReachBottom":50，也没有重新定义onReachBottom，不是函数被覆盖的问题，还是没能解决。看到有人说使用scroll-view会影响onReachBottom，可我写的文件页面里也没有scroll-view。在运行页面检查wxml页面结构，我发现了页面有scroll-view嵌套，这个scroll-view是怎么来的呢？
微信小程序-微信小程序滑动选项卡标签
08-06
微信小程序滑动选项卡标签是微信小程序开发中的一个重要组件，用于实现类似手机应用底部导航栏的效果，用户可以左右滑动切换不同的页面。在微信小程序中，这种功能通常通过`<swiper>`和`<swiper-item>`组件配合实现...
搞清楚微信小程序中的《程序app与页面page》
m0_58859743的博客
07-12 2003
从逻辑组成来说，一个小程序是由多个“页面”组成的“程序”。这里要区别一下“小程序”和“程序”的概念，往往我们需要在“程序”启动或者退出的时候存储数据或者在“页面”显示或者隐藏的时候做一些逻辑处理，了解程序和页面的概念以及它们的生命周期是非常重要的。...
微信小程序学习笔记（3）导航、刷新与生命周期
游星的博客
08-27 1022
微信小程序的导航、刷新事件与生命周期
微信小程序 Tab页切换更新数据
11-30
微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段，最不方便的莫过于官方在不停的更新，前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下： 我在首页点击“5万以上”他会把跳转到买车页然后同时把“5万以上”这个筛选条件带到买车页。 之前navigator导航是可以跳转并携带数据的，但这一次官方更新加了个新东西—–switchTab，专门用来实现tab页的跳转，但禁止携带数据 那么如果还想要实现我们的效果只能用别的方法了 想了一下有两种思路 1、用数据缓存 2、用全局变量存储globalData 最终我用的是全局变量，原因是我先尝试数据缓存的时候用的onLoad，onL
微信小程序实现tab页面切换功能
10-18
主要介绍了微信小程序实现tab页面切换功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序 解决tab页切换过快 数据出错问题
IT_iosers的博客
11-14 822
具体问题：切换tab页切换过快时,上一个列表接口未响应完和当前列表数据冲突 出现数据错误。解决方式：原理 通过判断。
小程序下拉加载刷新onReachBottom
Leijiang0504的博客
02-17 534
data: { limit: 11,//显示数据量 list: '', page: 1,//当前页 load: true, loading: false,//加载动画的显示 }, onReachBottom: function () { var that = this; if (that.data.load) {//全局标志位，方式请求未响应是多次触发 if (that.data.list.length < that.data..
微信小程序（踩过的坑）- （2）请求切换太快，同步冲突
巴黎左岸 · 荼靡花开
04-26 1069
（1）问题，tab之间切换太快，其中一个请求还未响应，另外一个请求已经发起 （2）解决 wx.showLoading({ title: '加载中', mask:true }) // get请求 遮层罩弹框有些请求不需要时，则showLoadFlag传false,不传则为默认为true function getReq(env, url, head...
小程序实现tab标签页，并且每个标签页独立实现加载更多（上拉触底）
weixin_44558497的博客
03-30 2050
原理：如果是普通页面的上拉触底事件可用小程序提供的：onReachBottom函数； 但现在是tab页，每个页面要独立进行滚动加载，这里用到了scroll-view的bindscrolltolower函数； 注意：有些童鞋自己写完之后bindscrolltolower不起作用，要注意几个点：scroll-view的高度设置没有设置，或者直接设置成100%，没有设置scroll-y="tr...
小程序 Vant Weapp 使用van-tabs控制切换tab请求后台频率
java_novice_qx的博客
09-18 858
这里写微信小程序代码，使用的vant组件库，然后想控制频繁的切换tab让后台发送请求的评论，这里实际是二级目录，但是和一级tabs的关系不大，所以不展示了，只需要知道这是一层就好了通过handleTabChange来控制，需要再data里面定义上次接口调用的时间，和选中的标签，来记录时间和加载默认选中项。
微信小程序实现tab切换
苏苏就是小苏苏的博客
01-14 1万+
1.实现效果 2.实现原理 循环一个数组，切换数据的时候根据index索引来动态的设置选中项，设置fixed定位，固定在顶部。 3.实现代码 <view class="hd"> <block wx:for="{{navList}}" wx:key="navList"> <view class="hd_flex {{nav_type == index ? 'hd_flex_on' : ''}}" catchtap="changeType" data-index="{
tab栏切换，列表参数改变触发2次请求的问题
风如也的博客
10-15 4461
问题场景：比如两个可切换的tab栏，两个内容框里面用的同一个请求列表的接口和同一个组件，请求列表的参数，除了公共参数之外，（tab2比tab1多两个参数）。 现在遇到的问题1是： 在每次切换tab的时候请求列表的接口都会调用两次，理想的情况是对应的tab栏只调用一次。 解决问题1的思路是：在tab里面的列表组件上添加 v-if:activeName，因为 el-tab本身内部是使用 v-show 来显示与隐藏 el-tab-pane的，所以在每次切换tab的时候接口会调用两次。 问题2：在子组件中修改父组件
微信小程序切换tab数据重复加载问题
09-08
微信小程序切换tab数据重复加载问题，主要是由于小程序的生命周期导致的。 当我们在微信小程序中切换tab页时，每个tab页都有自己的生命周期函数，例如onShow和onHide。当一个tab页被切换到前台时，它的onShow函数就...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值