最近公司在做自己的微信小程序,我选用了 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、√ 不解释