uniapp滑到元素底部

uniapp滑到元素底部

需要用到scroll-view这个标签:
scroll-y 允许纵向滚动
scroll-top 设置竖向滚动条位置
scroll-with-animation 在设置滚动条位置时使用动画过渡’

<scroll-view scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true">
	// do some thing
</scroll-view>
scrollTop:99999,//滑到元素距离顶部的距离

需要注意的是,若给scroll-view增加新的子元素,且需要做到滚到底部时,scrollTop的值不能一样,否则没有效果,这时我们只需要在原有基础加一就好啦

setTimeout(()=>{
	this.scrollTop = this.scrollTop + 1;
},300)
### 实现 uniapp 中点击按钮后页面滑动到底部 为了实现在 UniApp 应用中点击按钮使页面自动滚动底部的效果,可以利用 `uni.pageScrollTo` API 来完成这一功能。此方法允许开发者指定要滚动的位置以及动画执行的时间。 下面是一个具体的实现方式: #### HTML 部分 定义一个按钮用于触发滚动操作: ```html <template> <view class="content"> <!-- 其他内容 --> <button @click="scrollToBottom">点击我滚动到最下方</button> </view> </template> ``` #### JavaScript 方法部分 编写处理函数,在其中调用 `pageScrollTo` 接口并设置参数以达到平滑滚动的目的: ```javascript export default { methods: { scrollToBottom() { const query = uni.createSelectorQuery().in(this); query.select('.content').boundingClientRect(data => { if (data) { let windowHeight = data.height; uni.pageScrollTo({ scrollTop: windowHeight, duration: 300 // 动画持续时间(ms),可根据需求调整 }); } }).exec(); } } } ``` 上述代码片段展示了如何监听 `.content` 容器的高度,并据此计算出整个视窗应该滚动的距离,从而确保能够顺利到达页面的最底端[^1]。 需要注意的是,如果页面内存在其他可滚动组件(如 `scroll-view`),则可能会影响全局页面滚动行为;因此建议避免在同一页面混合使用不同类型的滚动容器[^4]。 另外一种方案是在特定场景下直接获取当前屏幕高度作为目标位置来进行滚动,但这通常不如基于实际布局尺寸更精确可靠。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值