微信小程序开发---上拉触底

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

目录

一、上拉触底的概念

二、监听页面的上拉触底事件

三、配置上拉触底距离

一、上拉触底的概念

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多的数据，也就是往下滑动。

二、监听页面的上拉触底事件

在页面.js文件宗，通过onReachBottom（）函数即可监听当前页面的上拉触底事件

onReachBottom(){
   console.log("上拉")
 }

三、配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或者页面的.json文件中，通过onReachBottomDistance属性配置上拉触底的距离

小程序默认的距离是50px

"onReachBottomDistance": 100

稻子永不倒
关注
专栏目录
uniapp [全端兼容] - 详细实现列表上拉懒加载及“到底了“功能示例，数据列表下拉滑动页面触底后请求接口懒加载数据，自动计算分页/总条数、判断分页懒加载是否继续请求接口数据，以及数据没有了提醒！
王佳斌
10-07 3978
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，列表，懒加载，触底加载，上拉页面触发加载，列表懒加载如何判断是否还需要继续请求接口，如何知道数据加载已经没有了停止继续请求，分页判断，列表滚动触底更新实现，页面滚动到底部后请求数据填充到data中，小程序上拉加载和下拉刷新，如何分页加载数据，实现上拉加载功能示例加载更多数据/触底加载/点击加载更多数据，数据分页请求，onReachBottom()，不生效，不触发的情况，列表下拉加载判断是否到底了，我是
微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
06-29 6828
页面基本构成：1、商品轮播图展示。4、点击加入购物车，可以将该商品加入购物车中。页面基本构成：1、如果没选地址，先选择收获地址。2、购买的商品详情，及订单总价。2、商品分类（点击左侧不同分类，右方展示不同商品）。3、点击右方商品，可以跳转到对应的商品列表页面。4、总价和数量会随着选中的商品变化。2、我的订单，也可以跳转到订单页面。2、商品列表（点击商品会跳转）。3、触底后，会加载新的数据。有需要源码的、或者额外需求的、可联系本人。
微信小程序开发系列（三十二）·如何通过小程序的API实现页面的上拉加载（onReachBottom事件）和下拉刷新（onPullDownRefresh事件）
时光の尘的博客
03-14 3723
① usingComponents: 这里可以列出项目中所需要使用的组件，可以在这里注册项目自定义的组件，以便在页面中引用和调用。③ enablePullDownRefresh: 设置为 true 表示页面可以下拉刷新，用户下拉页面时会触发下拉刷新事件。① 在 app.json 或者 page.json 中开启允许下拉，同时可以配置 窗口、loading 样式等。下拉刷新是小程序中常见的一种刷新方式，当用户下拉页面时，页面会自动刷新，以便用户获取最新的内容。
微信小程序学习-页面事件
最新发布
weixin_53003673的博客
08-12 810
当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果。backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light。在页面的.js文件中，通过 onPullDownRefresh 函数即可监听当前页面的下拉刷新事件。下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面的数据。backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值。
微信小程序onReachBottom事件使用
m0_73481765的博客
09-09 2269
在微信小程序中，onReachBottom事件用于监听页面滚动到页面底部的时候触发的事件。当用户滑动页面到底部时，可以通过监听该事件来执行相应的操作。要使用onReachBottom事件，需要在对应的页面或组件中定义一个函数，并在Page或Component的生命周期函数中注册该事件。函数中添加一些判断逻辑，例如设置一个标志位，表示正在加载中，当加载完成后再将该标志位设为false，防止再次触发加载操作。的函数来处理页面滚动到底部时的逻辑操作。需要注意的是，当页面或组件的内容较长时，才会触发。
微信小程序上拉加载：onReachBottom详解+设置触发距离
jia2799897415的博客
08-06 2563
前端经常遇到上拉加载更多的需求，一般还涉及到翻页。小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多，有需要的直接看代码，有详细注释： 1、首先在data里定义一下返回数据data,和翻页的页数pagenum data: { datalist: [], //.wxml文件需要绑定的列表，我这里用的数据类型是数组 pagenum: 1, //初始页默认值为1 }, 2、具体的请求过程，包含新老数据的数组合并，实现数据实时更新 g
微信小程序上拉触底事件
m0_62508027的博客
09-09 2388
微信下拉触底事件案例
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
在微信小程序开发中，`scroll-view`组件是一个非常重要的元素，它允许用户在内容超过屏幕范围时进行滚动浏览。在本教程中，我们将探讨如何在`scroll-view`中实现下拉刷新（Pull-to-Refresh）功能，同时提供一个具体...
微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
蜗牛的博客
10-23 679
微信小程序头像上传、瀑布流、下拉刷新、触底加载更多、分包
原生微信小程序开发-黑马优购（一）
peng109的博客
03-14 3133
接口文档地址： 轮播图--ShowDoc 视频地址： 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili vs快捷键 wx-app wx-page 通过样式方式引入字体图标 微信小程序中不支持通配符“ * ” 页面初始化 主体颜色定义成变量 微信小程序单行注释没有用 单行注释没有用（//） 要 用多行注释（/* */） 写less文件，变成wxss文件？ 发送请求 ，要么记得把勾去掉，要么去开启请求合法域名 引入的路径要写...
微信小程序开发中的数据分页和加载更多
m0_75244442的博客
07-24 291
准备工作 首先，在微信开发者工具中创建一个新的小程序项目。在项目目录下，创建四个文件：index.wxml、index.wxss、index.js和index.json。在实际项目中，可以根据服务器接口定义数据的获取方式，注意处理异常情况，例如网络错误等。微信小程序开发中，数据分页和加载更多是一个常见的需求，它可以提升用户体验，避免一次性加载大量的数据，同时也可以减少服务器压力。下面是一个关于数据分页和加载更多的代码案例。这里使用一个scroll-view组件来展示数据，并添加一个加载更多的按钮。
小程序demo--上拉加载
03-08
小程序demo--上拉加载
微信小程序 onReachBottom 上拉加载
sunsineq的专栏
09-08 375
3、翻页时更新页码pagenum+1，并触发新一轮请求，和第2部形成循环。1、首先在data里定义一下返回数据data,和翻页的页数pagenum。2、具体的请求过程，包含新老数据的数组合并，实现数据实时更新。4、json 页面设置。
【微信小程序】基础篇 -- 页面事件 - 上拉触底（二十六）
JMFive的博客
03-07 2434
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第26篇文章;今天开始学习微信小程序的第14天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序：onReachBottom(),onPullDownRefresh()事件不触发的原因
Queen-Shir的博客
11-29 6780
onReachBottom()下拉触顶： 原因：页面上的内容没有超出文档的高度，当前页面没有滚动条，就不会触发上拉触底事件。上拉不了就不会触底。 此时可以用滚动监听事件代替。 onPageScroll:function(e){ console.log(e.scrollTop); if (e.scrollTop>=92){ ...... } ...
微信小程序简单实现上拉触底onReachBottom数据分页请求
qq_51090530的博客
06-25 1233
实现思路：通过小程序上拉触底事件触发数据第二次请求，上拉触底一次请求分页页码加一，每次请求10条数据，在请求函数中通过函数来处理数据累加问题，为封装的小程序函数。页面结构 主要实现代码如下：...
微信小程序开发学习笔记——4.10【小案例】触底加载更多数据onReachBottom
Qy_cm的博客
04-12 666
>跟着b站up主“咸虾米_”学习中，把学习记录存到这方便后续查找。
微信小程序触底加载
Cupid
12-23 347
data: { page:1 // 声明页数 }, //触底 onReachBottom: function () { this.setData({ //改变页码 page: this.data.page+1, }) this.getGoods() }, getGoods(){ request1({ url: "接口地址",data: { page:this.data.page,pageSize:20 }}) .the..
小程序，上拉触底事件
qq_46099629的博客
09-30 248
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
微信小程序触底后进行锚点跳转
05-30
对于微信小程序触底后进行锚点跳转，可以通过使用小程序的scroll-view组件和wxs实现。具体步骤如下： 1. 在scroll-view组件中设置scroll-top属性和id属性，id属性为锚点的标记。 2. 在wxs中定义一个函数，用来监听scroll-view组件的滚动事件，当滚动到底部时，获取到锚点的位置并进行跳转。 以下是一个示例代码： ``` <!--wxml文件--> <scroll-view scroll-y="true" scroll-top="{{scrollTop}}"> <view id="anchor1"></view> <!--省略中间的内容--> <view id="anchor2"></view> </scroll-view> <!--wxss文件--> /*设置scroll-view组件的高度*/ scroll-view { height: 100%; } <!--wxs文件--> var anchorTop = 0; module.exports = { //监听scroll-view组件的滚动事件 handleScroll: function (e) { //获取到scroll-view组件的滚动距离 var scrollTop = e.detail.scrollTop; //获取到锚点的位置 var query = wx.createSelectorQuery(); query.select('#anchor1').boundingClientRect(); query.select('#anchor2').boundingClientRect(); query.exec(function (res) { anchorTop = res[1].top;//获取到锚点的位置 //当滚动到底部时，进行锚点跳转 if (scrollTop + 500 >= anchorTop) { wx.pageScrollTo({ scrollTop: anchorTop, duration: 300 }) } }) } } ``` 在以上示例代码中，wxs文件中的handleScroll函数用来监听scroll-view组件的滚动事件，并且获取到锚点的位置。当滚动到底部时，使用wx.pageScrollTo函数进行锚点跳转，将scrollTop设置为锚点的位置，duration为滚动的时间。 需要注意的是，以上示例代码中的锚点位置获取方式仅适用于锚点距离scroll-view组件顶部的距离小于500px的情况，如果锚点距离顶部的距离较大，需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

稻子永不倒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值