uni-app(微信小程序):scroll-view的滑动事件不触发的解决方案

2,344 阅读1分钟
最近公司在做自己的微信小程序,我选用了 uni-app 框架。在陆续的开发过程中,我不仅收货满满,也踩坑无数。所以想记录下来,以免重蹈覆辙。

1、发现问题

1.1、因为数据太多,小程序需要 “加载更多” 这个功能

1.2、看完 uni-app 的 Demo ,确定需要使用 scroll-view 这个组件

1.3、当按照 Demo 写完代码后,发现无论怎样操作都无法触发 加载更多 的事件


2、解决问题

2.1、页面要设置高度

2.2、包裹 scroll-view 的元素也要设置高度

2.3、scroll-view 元素更要设置高度

2.4、上代码

<template>
    <view class="demo">
        <!-- 其他内容 -->
        <view class="content">
            <scroll-view class="content-scroll">
                <!-- other -->
            </scroll-view>
        </view>
    </view>
</template>

<style>
.demo {
    height: 100%; // 必须
}
.content {
    height: calc(100vh - 250rpx); // 它上面如果有其他内容则这样使用,如果没有直接写 100%
}
.content-scroll {
    height: 100%; // 必须
}
</style>

3、解析问题

3.1、√ 不解释