2021-11-06 uniapp解决scroll-view滑动事件失效问题@scrolltolower

最新推荐文章于 2025-06-24 21:23:20 发布

原创最新推荐文章于 2025-06-24 21:23:20 发布 · 4.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #uni-app

uni-app开发专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何解决uniapp中scroll-view的@scrolltolower滑动事件失效问题。关键步骤包括：确保scroll-view设置固定高度，避免使用百分比；同时为其父容器设定高度。示例代码展示了如何利用calc()函数动态计算高度，以确保事件正常触发。通过遵循这些方法，开发者可以有效地在uniapp应用中实现滚动到底部时的触底事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp解决scroll-view滑动事件失效问题@scrolltolower

1、首先scroller-view需要给定高度，这里的高度最好不要是width：num%这种类型的，很容易不生效。

2、父容器最好也指定高度

下面通过举例来说明

<template>
	<view class="main">
	<scroll-view class="scroll-content" scroll-y @scrolltolower="reachBottom">
        //省略内容
    </scroll-view>
</view>
</template>

<script>
    export default{
		methods:{
           reachBottom(){
               //这里是触底需要做的事情
           }   
        }
}   
</script>

<style>
.main{
    heigth:100%;
    width:100%;
}
.scroller-content{
    width:100%;
    height:calc(100vh - var(--window-top));//calc()是动态计算函数
    //100vh:把屏幕高度分成100等份
    //--window-top屏幕顶部栏目部分
}
</style>