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

最新推荐文章于 2024-08-14 09:00:32 发布
最新推荐文章于 2024-08-14 09:00:32 发布
阅读量872 收藏
点赞数
分类专栏： 小知识 微信小程序 文章标签： 微信小程序 javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BubbleABC/article/details/126393124
版权
本文介绍如何在微信小程序中通过JavaScript实现点击按钮自动滚动到页面顶部或底部的功能，结合WXML代码示例进行详细说明。
摘要由CSDN通过智能技术生成

wxml：

<button bindtap="goTop">让我上去</button>
<button bindtap="goBottom">让我下来<
最低0.47元/天 解锁文章
钟Bubble
关注
专栏目录
微信小程序scroll-view滚动条始终再最底部，实现自动滚动的效果
yueyue1111111的博客
07-06 6597
微信小程序scroll-view的使用
微信小程序列表滚动到底部，当元素高度增加时，自动滚动出后面的元素
guairena的博客
05-16 2621
场景： 场景1、列表使用scroll-view标签的bindscrolltolower实现的分页滚动加载 场景2、列表使用view标签和onReachBottom结合实现的分页滚动加载 当滚动到最后一页最后一条数据时，该条数据可以通过按钮展开收起部分元素，默认是收起的状态，当点击按钮时会在该条数据后面展开一些元素。此时该条数据的整体高度是增大的，整个页面的高度也是增大的。 由于在展开元素前，滚动条已经滚动到最底部了，此时无法监测到页面高度增加了，导致展开的元素在最底部没有展示出来了，需要手动滚动页面后，才会
微信小程序中实现自动滚动
最新发布
qq_42931285的博客
08-14 423
微信小程序中实现自动滚动
微信小程序让页面自动滚动到底部，
qq_43358160的博客
10-09 5470
需求 用户进入聊天页，页面自动滚动到底部，每发一条消息或接收到一条消息也是最底部 实现 1、给需要滚动的view加上ID 2、在data中加上公共变量scrollTop data(){ scrollTop: 0 } 3、在onShow（）总加上以下代码 let that = this; wx.createSelectorQuery().select('#viewCommunicationBody').boundingClientRect(function (rect) { wx.pageScrol
微信小程序自动滚动到底部
weixin_44131298的博客
09-14 1203
微信小程序
微信小程序 滚动到底部加载新的数据 之后滚动到顶部
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
06-30 2186
里面的300表示距离底部300rpx触发onReachBottom事件 默认50rpx。在app.json的window里面加入。在数据列表的js页面。
微信小程序页面滚动至底部
yueye_wu的博客
06-06 1521
微信小程序页面滚动至底部
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
10-17
总结来说，这个实例展示了如何结合微信小程序的 `scroll-view` 组件、动态计算和数据绑定，实现自动滚动到底部的功能。开发者可以根据实际需求调整代码，例如添加动画效果，或者在滚动到底部时触发加载更多数据的...
微信小程序实现无限滚动列表
10-17
在微信小程序中，实现无限滚动列表是一种常见的需求，主要用于展示大量数据，如商品列表、用户信息等。这种滚动效果能够给用户带来流畅的浏览体验，同时也优化了性能，避免一次性加载过多数据导致页面卡顿。以下是...
微信小程序实现自上而下字幕滚动
10-18
在微信小程序中实现自上而下的字幕滚动效果，我们可以采用两种不同的方法。这两种方法都是为了达到文字在屏幕内自下而上滚动，并且能够自动循环的效果。 **第一种方法：使用swiper组件** 最初，开发者可能会尝试...
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
今日准备把微信小程序的下拉刷新做一下，没想到我绑定了bindscrolltolower事件，但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我在.wxss里设置了高度为100%: .scrollStyle{ width: 100%; height: 100%; display: flex; flex-direction: column; } 居然无效，修改height为具体高度也无效. 然后我在 style里设置height为200px，居然生效了: <scroll
解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部
仰望星空的代码
07-03 2679
一、问题描述 项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。 滚动到第二屏，证件号输入。 点击输入框 可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。 注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页
微信小程序使用scroll-view标签实现自动滑动到底部
Min_nna的博客
11-15 1657
【代码】微信小程序使用scroll-view标签实现自动滑动到底部。
微信小程序，自动滑动到页面底部功能
weixin_34235457的博客
04-22 9114
2019独角兽企业重金招聘Python工程师标准>>> ...
【微信小程序】列表滚动触底更新实现
qq_22744093的博客
08-19 2737
在微信小程序开发中经常遇到分页列表需要滚动到底部之后进行请求数据更新，下面介绍如何进行触底更新分页展示。使用到页面上拉触底事件的处理函数。
告别繁琐滑动，微信小程序一键回到顶部功能
Shids_的博客
09-28 6692
告别繁琐滑动，微信小程序一键回到顶部功能
微信小程序 - 返回顶部解决方案（滚动回到顶部）
王佳斌
05-13 3500
前言 对于小程序长列表，当页面滚动一定距离时，出现返回顶部按钮方便用户回到顶部。 本文将提供给您一个完整的示例，代码干净整洁， 您可用于自己的项目，具体效果如下图所示： 解决方案 核心思路：利用钩子函数进行监听滚动，到达一定值后显示返回顶部自定义按钮。 您找个新页面，一键复制运行起来即可。 <view wx:for="{{100}}" wx:key="index"> 制造点数据 </view> <view wx:if="{{ backTop }}" bindtap
微信小程序页面如何滚动到底部
知行合一，跬步致远
03-16 972
在需要滚动的页面根节点定义一个id="page" <view id="page"> <text>需要滚到的页面</text> </view> 点击事件触发以下方法 wx.createSelectorQuery().select('#page').boundingClientRect(rect => { wx.pageScrollTo({ duration: 500, // 动画时长 scrollTop: re.
微信小程序自动滚动通告栏
05-14
要实现微信小程序自动滚动通告栏，可以使用小程序原生的scroll-view组件，然后通过定时器和动态修改scroll-view的scrollTop属性来实现。 具体步骤如下： 1. 在wxml文件中，使用scroll-view组件，并设置固定高度和滚动方向： ``` <scroll-view class="scroll-view" scroll-y="true" style="height: 70rpx;"> <!-- 在这里放置通告内容 --> </scroll-view> ``` 2. 在js文件中，获取scroll-view组件的节点对象，并定义一个变量用于保存当前滚动的距离： ``` Page({ data: { scrollTop: 0 }, onLoad: function () { // 获取scroll-view组件的节点对象 this.scrollView = this.selectComponent('.scroll-view') } }) ``` 3. 使用定时器，每隔一定时间修改scrollTop属性值，实现自动滚动。 ``` Page({ data: { scrollTop: 0 }, onLoad: function () { // 获取scroll-view组件的节点对象 this.scrollView = this.selectComponent('.scroll-view') // 定时器，每隔1秒滚动一次 setInterval(() => { // 滚动速度，每次滚动5px const speed = 5 // 获取当前scrollTop的值 const scrollTop = this.data.scrollTop // 计算新的scrollTop的值 const newScrollTop = scrollTop + speed // 设置新的scrollTop的值 this.setData({ scrollTop: newScrollTop }) // 如果滚动到了最底部，就回到顶部重新滚动 if (newScrollTop >= this.scrollView.scrollHeight - this.scrollView.height) { this.setData({ scrollTop: 0 }) } }, 1000) } }) ``` 这样就可以实现微信小程序自动滚动通告栏了。需要注意的是，scroll-view组件的高度和通告内容的高度需要根据实际情况进行调整，以确保能够正常滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

钟Bubble

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

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

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

打赏作者

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

抵扣说明：

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

余额充值