微信小程序 点击自动滚动到最底部/顶部

最新推荐文章于 2025-10-13 15:50:36 发布
原创 最新推荐文章于 2025-10-13 15:50:36 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #javascript #小程序

本文介绍如何在微信小程序中通过JavaScript实现点击按钮自动滚动到页面顶部或底部的功能，结合WXML代码示例进行详细说明。

wxml：

<button bindtap="goTop">让我上去</button>
<button bindtap="goBottom">让我下来
最低0.47元/天 解锁文章
解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部
仰望星空的代码
07-03 3064
一、问题描述 项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。 滚动到第二屏，证件号输入。 点击输入框 可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。 注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页
微信小程序scroll-view滚动条始终再最底部，实现自动滚动的效果
yueyue1111111的博客
07-06 8152
微信小程序scroll-view的使用
微信小程序让页面自动滚动到底部，
qq_43358160的博客
10-09 6438
需求 用户进入聊天页，页面自动滚动到底部，每发一条消息或接收到一条消息也是最底部 实现 1、给需要滚动的view加上ID 2、在data中加上公共变量scrollTop data(){ scrollTop: 0 } 3、在onShow（）总加上以下代码 let that = this; wx.createSelectorQuery().select('#viewCommunicationBody').boundingClientRect(function (rect) { wx.pageScrol
【微信小程序中运用scroll-view实现区域滚动和回到顶部 基础篇 1 （结合实例）】
2301_76624160的博客
10-13 863
本文介绍了微信小程序中scroll-view组件的两种实用场景：1. 实现纵向区域滚动（可应用于上拉加载更多）2. 实现回到顶部功能
微信小程序列表滚动到底部，当元素高度增加时，自动滚动出后面的元素
guairena的博客
05-16 2871
场景： 场景1、列表使用scroll-view标签的bindscrolltolower实现的分页滚动加载 场景2、列表使用view标签和onReachBottom结合实现的分页滚动加载 当滚动到最后一页最后一条数据时，该条数据可以通过按钮展开收起部分元素，默认是收起的状态，当点击按钮时会在该条数据后面展开一些元素。此时该条数据的整体高度是增大的，整个页面的高度也是增大的。 由于在展开元素前，滚动条已经滚动到最底部了，此时无法监测到页面高度增加了，导致展开的元素在最底部没有展示出来了，需要手动滚动页面后，才会
微信小程序组件scroll-view滚动到底部多次触发加载如何解决？
超人不会飞
05-23 2992
在 iOS 真机上，scroll-view 滚动时会多次触发 scrolltolower 事件的问题，可以设置一个“加载标识”（如 DisableTrigger）来避免重复请求下一页数据。在 onreachBottom 方法中，判断 DisableTrigger 是否为 true，如果是，则执行下一页数据的加载，否则不做任何操作。在 init()方法中，在请求数据前将 DisableTrigger 设置为 false，表示当前正在加载数据。
微信小程序自动滚动到最底部
小白变怪兽
10-09 2800
微信小程序自动滚动到最底部实现方案 应用场景：eg：聊天记录 wxml: <scroll-view style="max-height: 100vh; background: pink;" scroll-y="true" scroll-into-view="{{scrollLast}}"> <view wx:for="{{dataList}}" id="lastPosition" style="border-bottom: 3rpx solid red; height: 100rpx;
微信小程序页面滚动至底部
yueye_wu的博客
06-06 1609
微信小程序页面滚动至底部
微信小程序实现无限滚动列表
10-17
在微信小程序中，实现无限滚动列表是一种常见的需求，主要用于展示大量数据，如商品列表、用户信息等。这种滚动效果能够给用户带来流畅的浏览体验，同时也优化了性能，避免一次性加载过多数据导致页面卡顿。以下是...
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
10-17
总结来说，这个实例展示了如何结合微信小程序的 `scroll-view` 组件、动态计算和数据绑定，实现自动滚动到底部的功能。开发者可以根据实际需求调整代码，例如添加动画效果，或者在滚动到底部时触发加载更多数据的...
微信小程序实现自上而下字幕滚动
10-18
在微信小程序中实现自上而下的字幕滚动效果，我们可以采用两种不同的方法。这两种方法都是为了达到文字在屏幕内自下而上滚动，并且能够自动循环的效果。 **第一种方法：使用swiper组件** 最初，开发者可能会尝试...
微信小程序点击滚动到指定位置的实现
11-20
公司项目要做一个类似微信通讯录导航的效果，点击右侧字母页面滚动到相应位置。 因为微信小程序没有dom概念，所以不能使用锚点，也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息： let query = wx.createSelectorQuery().in(this); query.selectViewport().scrollOffset() query.select("#Nav").boundingClientRect(); query.select("#FilterNav").boundingClientRect(); query.selec
告别繁琐滑动，微信小程序一键回到顶部功能
希望看完文章的你能够带着答案离开。
09-28 7818
告别繁琐滑动，微信小程序一键回到顶部功能
微信小程序自动滚动到底部
weixin_44131298的博客
09-14 1327
微信小程序
微信小程序里页面滚动到底部
怎奈你何的博客
03-29 1106
小程序页面要滚动到页面的底部，可以写上以下这句： wx.pageScrollTo({ scrollTop:1000 }) 在需要触发的地方写上这句，就会滚动到页面的底部了。
微信小程序使用scroll-view标签实现自动滑动到底部
Min_nna的博客
11-15 2244
【代码】微信小程序使用scroll-view标签实现自动滑动到底部。
uniapp ，微信小程序，滚动（下滑，上拉）到底部加载下一页内容
qq_43557848的博客
10-29 1945
先定义总页码和当前页码,data(){return{data:[],currentPage:1,//页码totle_page:0,//总页码},reload(){//重置页码//清空数据//加载数据},
微信小程序（滚动吸顶）
weixin_43837268的博客
06-06 1166
【代码】微信小程序（滚动吸顶）
微信小程序scroll-view回到顶部
weixin_46115860的博客
04-24 5017
说明： 使用scroll-view，当数据过多，scroll-view容器滚动过长的位置时，如何回到scroll-view的顶部 解决方法（仅放置重要代码）： 在.wxml文件中，添加scroll-top，并使用model双向绑定 <scroll-view class="scroll-content" scroll-y model:scroll-top="{{myScrollTop}}" > ...内容 </scroll-view> <!-- 回到顶部的图标，含有b
uniapp 微信小程序 产品列表滚动到底部触发加载 完整代码示例
最新发布
10-23
<think>根据用户的需求，用户想要一个在UniApp中开发微信小程序时，实现产品列表滚动到底部触发加载的完整代码示例。我们将结合之前的引用内容，特别是引用[3]中关于下拉刷新和上拉加载的代码片段，来构建一个完整的示例。 ### 关键点分析 1. **页面配置**：需要在`pages.json`中配置当前页面允许上拉触底，并设置触底距离。 2. **数据变量**：需要定义存储产品列表的数组、当前页码、每页数量、总数据量等变量。 3. **生命周期/页面事件**：使用`onReachBottom`事件处理滚动到底部的逻辑。 4. **加载数据方法**：实现一个从后台获取数据的方法，注意分页参数的处理。 5. **加载状态管理**：避免重复加载，需要设置加载状态（如正在加载、没有更多数据等）。 ### 完整代码示例 #### 1. pages.json 配置 ```json { "pages": [ { "path": "pages/product/list", "style": { "enablePullDownRefresh": true, "onReachBottomDistance": 100 // 距离底部100px时触发上拉加载 } } ] } ``` #### 2. 页面脚本 (list.vue) ```vue <script> export default { data() { return { productList: [], // 产品列表数据 page: 1, // 当前页码 pageSize: 10, // 每页显示数量 total: 0, // 总数据量 isLoading: false, // 是否正在加载中（防止重复加载） hasMore: true // 是否还有更多数据 } }, onLoad() { this.loadProducts(); // 页面加载时获取初始数据 }, methods: { // 加载产品数据 async loadProducts() { if (this.isLoading || !this.hasMore) return; // 防止重复请求 this.isLoading = true; uni.showLoading({ title: '加载中...' }); // 显示加载动画 try { // 调用API获取数据，假设API返回格式为{ total: 100, list: [...] } const res = await uni.request({ url: 'https://your-api.com/products', method: 'GET', data: { page: this.page, pageSize: this.pageSize } }); const { total, list } = res.data; this.total = total; this.productList = [...this.productList, ...list]; // 追加新数据 this.hasMore = this.productList.length < total; // 判断是否还有更多数据 this.page++; // 页码增加 } catch (error) { console.error('加载失败:', error); uni.showToast({ title: '加载失败', icon: 'none' }); } finally { this.isLoading = false; uni.hideLoading(); // 隐藏加载动画 } }, // 下拉刷新 onPullDownRefresh() { this.page = 1; this.productList = []; this.hasMore = true; this.loadProducts().then(() => { uni.stopPullDownRefresh(); // 停止下拉刷新 }); } }, // 上拉触底事件 onReachBottom() { this.loadProducts(); // 加载下一页数据 } } </script> ``` #### 3. 页面模板 (list.vue) ```vue <template> <view> <view v-for="(product, index) in productList" :key="index"> <!-- 产品项展示 --> <text>{{ product.name }}</text> <!-- 其他产品信息 --> </view> <!-- 加载状态提示 --> <view v-if="isLoading" class="loading-text">加载中...</view> <view v-if="!hasMore" class="no-more">没有更多了~</view> </view> </template> <style> .loading-text, .no-more { text-align: center; padding: 20rpx; color: #999; } </style> ``` ### 原理说明 1. **初始化加载**：`onLoad`生命周期中调用`loadProducts`加载第一页数据。 2. **上拉加载**：当用户滚动到底部（距离底部100px）时，触发`onReachBottom`事件，调用`loadProducts`加载下一页。 3. **防止重复加载**：通过`isLoading`状态变量控制，避免同时发起多个请求。 4. **数据追加**：每次获取新数据后，通过`this.productList = [...this.productList, ...list]`追加到现有列表。 5. **下拉刷新**：重置页码和列表，重新加载数据并停止下拉刷新动画。 ### 注意事项 1. **API接口规范**：示例中假设API支持分页参数（page和pageSize），实际开发需根据后端接口调整。 2. **加载状态提示**：提供了加载中和没有更多数据的UI提示，提升用户体验。 3. **错误处理**：使用`try-catch`捕获请求异常，并给出用户反馈。 ### 相关问题 1. 如何优化UniApp中长列表的渲染性能？[^3] 2. 微信小程序中如何处理滚动到顶部固定元素的需求？ 3. UniApp开发中如何实现跨端的分页加载组件？ [^1]: UniApp只是一个第三方的开发工具，借鉴各种平台的能力，UniApp的组件也借鉴了微信小程序的组件，我们学习时，可以进行对照学习，我们在用UniApp开发微信小程序时，UniApp也只是将代码转成了微信小程序的代码，还是需要了解微信小程序开发，才能开发出微信小程序的。 [^2]: uniapp微信小程序系列（1）基础与入门。uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，支持iOS、Android、Web及各平台小程序。本系列文章为uni-app开发微信小程序知识点的归纳总结。 项目创建推荐 [^3]: uni-app微信小程序上拉加载，下拉刷新。pages.json配置官网链接 onPullDownRefresh、onReachBottom函数跟生命周期同级 [^4]: uniapp开发微信小程序笔记5-介绍三类生命周期。一、uni-app的生命周期分为三类： 应用的生命周期：指的是针对整个小程序的生命周期，写在App.vue中；页面的生命周期：指的是项目pages目录中每一个页面的生命周期；组件的生命周期：指的是项目compontents目录中自定义的每一个组件文件的生命周期。 </think>以下是在 UniApp 中实现微信小程序产品列表滚动到底部自动加载的完整代码示例，结合了 UniApp 的生命周期和微信小程序的特性： ```vue <template> <view class="container"> <!-- 产品列表 --> <view v-for="(product, index) in productList" :key="index" class="product-item"> <image :src="product.image" class="product-image" /> <view class="product-info"> <text class="product-name">{{ product.name }}</text> <text class="product-price">¥{{ product.price }}</text> </view> </view> <!-- 底部加载提示 --> <view class="loading-tip"> <text v-if="isLoading">加载中...</text> <text v-if="!hasMore && productList.length > 0">没有更多商品了</text> </view> </view> </template> <script> export default { data() { return { productList: [], // 产品列表数据 page: 1, // 当前页码 pageSize: 10, // 每页数量 total: 0, // 总产品数 isLoading: false, // 是否正在加载 hasMore: true // 是否有更多数据 } }, onLoad() { this.loadProducts(); // 页面加载时获取初始数据 }, methods: { // 加载产品数据 async loadProducts() { if (this.isLoading || !this.hasMore) return; this.isLoading = true; try { // 模拟API请求，实际项目中替换为真实API const mockData = this.getMockData(); const newProducts = mockData.products; this.total = mockData.total; this.productList = [...this.productList, ...newProducts]; // 计算是否还有更多数据 this.hasMore = this.productList.length < this.total; // 更新页码 this.page++; } catch (error) { console.error('加载失败:', error); uni.showToast({ title: '加载失败', icon: 'none' }); } finally { this.isLoading = false; } }, // 模拟数据方法（实际项目中替换为真实API请求） getMockData() { const startIndex = (this.page - 1) * this.pageSize; const products = []; for (let i = 1; i <= this.pageSize; i++) { products.push({ id: startIndex + i, name: `商品 ${startIndex + i}`, price: (Math.random() * 100 + 10).toFixed(2), image: '/static/product-placeholder.jpg' }); } return { products, total: 50 // 模拟总产品数 }; } }, // 滚动到底部事件（页面级生命周期） onReachBottom() { if (this.hasMore) { this.loadProducts(); } } } </script> <style scoped> .container { padding: 20rpx; } .product-item { display: flex; padding: 20rpx; border-bottom: 1rpx solid #eee; } .product-image { width: 200rpx; height: 200rpx; margin-right: 20rpx; } .product-info { flex: 1; } .product-name { font-size: 32rpx; color: #333; line-height: 1.5; } .product-price { font-size: 36rpx; color: #e64340; font-weight: bold; margin-top: 10rpx; display: block; } .loading-tip { text-align: center; padding: 30rpx; font-size: 28rpx; color: #999; } </style> ``` ### pages.json 配置（必需） ```json { "pages": [ { "path": "pages/product/list", "style": { "enablePullDownRefresh": false, "onReachBottomDistance": 100 // 触发距离（距离底部100px时触发） } } ] } ``` ### 核心实现原理 1. **生命周期管理**： - `onLoad`：初始化页面时加载首批数据[^4] - `onReachBottom`：页面滚动到底部时触发的生命周期函数[^3] 2. **分页逻辑**： ```javascript const startIndex = (this.page - 1) * this.pageSize ``` 使用当前页码计算数据起始位置（实际项目中需通过API参数传递给后端） 3. **滚动检测**： ```json "onReachBottomDistance": 100 ``` 在pages.json中设置检测距离（单位px），默认50px 4. **加载状态管理**： - `isLoading`：防止重复请求 - `hasMore`：判断是否还有更多数据 5. **数据拼接**： ```javascript this.productList = [...this.productList, ...newProducts] ``` 使用扩展运算符拼接新旧数据 ### 优化建议 1. **添加骨架屏**： ```vue <view v-if="isLoading && page === 1"> <!-- 骨架屏内容 --> </view> ``` 2. **错误重试机制**： ```javascript let retryCount = 0; if (error && retryCount < 3) { retryCount++; this.loadProducts(); } ``` 3. **使用 scroll-view 组件**（替代页面级滚动）： ```vue <scroll-view scroll-y :style="{height: screenHeight + 'px'}" @scrolltolower="loadMore" > <!-- 列表内容 --> </scroll-view> ``` ### 相关问题 1. 如何优化 UniApp 中长列表的渲染性能？[^3][^4] 2. 微信小程序中下拉刷新应该如何实现？[^3] 3. UniApp 开发中如何处理不同平台的上拉加载兼容性问题？[^1][^2] 4. 如何实现列表数据的本地缓存和更新策略？[^4] [^1]: UniApp只是一个第三方的开发工具，借鉴各种平台的能力，UniApp的组件也借鉴了微信小程序的组件，我们学习时，可以进行对照学习，我们在用UniApp开发微信小程序时，UniApp也只是将代码转成了微信小程序的代码，还是需要了解微信小程序开发，才能开发出微信小程序的。 [^2]: uniapp微信小程序系列（1）基础与入门。uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，支持iOS、Android、Web及各平台小程序。 [^3]: uni-app微信小程序上拉加载，下拉刷新。pages.json配置官网链接 onPullDownRefresh、onReachBottom函数跟生命周期同级。 [^4]: uniapp开发微信小程序笔记5-介绍三类生命周期。一、uni-app的生命周期分为三类： 应用的生命周期：指的是针对整个小程序的生命周期，写在App.vue中；页面的生命周期：指的是项目pages目录中每一个页面的生命周期；组件的生命周期：指的是项目compontents目录中自定义的每一个组件文件的生命周期。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

钟Bubble

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

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

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

打赏作者

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

抵扣说明：

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

余额充值