uniapp scroll-view根据内容 算出scrollTop总高度
时间: 2024-09-25 07:20:25 浏览: 29
在UniApp中,如果你想要获取`scroll-view`组件的内容滚动条顶部到顶部的距离(即总高度),你可以通过监听`scroll`事件,并结合组件的高度属性来计算。以下是一个简单的示例:
```javascript
<view class="scroll-view" @scroll="onScroll">
<!-- 内容区 -->
<scroll-view bindscrolltolower="loadMore">...</scroll-view>
</view>
<script>
export default {
data() {
return {
scrollTop: 0,
contentHeight: 0, // 需要在页面渲染完成后手动设置
};
},
methods: {
onScroll(e) {
this.scrollTop = e.detail.scrollTop; // 获取滚动位置
this.contentHeight = this.$refs.scrollViewChild.offsetHeight; // 获取滚动视图的实际高度,假设scroll-view有个ref名为scrollViewChild
},
loadMore() {
// 当滚动到底部触发此方法时,可以在这里做相应的加载更多操作
if (this.scrollTop === this.contentHeight - this.$refs.scrollViewChild.clientHeight) {
// 加载更多代码...
}
},
},
created() {
this.contentHeight = this.$refs.scrollViewChild.offsetHeight; // 初始化内容高度
},
};
</script>
```
在这个例子中,你需要确保在`created`生命周期钩子里初始化`contentHeight`,并在`onScroll`事件处理函数中更新`scrollTop`值。`loadMore`方法会在用户滚动到底部时自动执行。