uniapp <scroll-view>组件自适应高度问题
uniapp 组件自适应高度问题。
·
最近在开发过程中。uniapp 的触底加载数据,不生效;官方文档说要给一个固定高度。如果固定就会产生适配问题。看网上大多数用js控制,我觉得太麻烦。能用css控制,我就不用js.;接下来就看下解决方法,主要用到弹性布局
先说布局介绍和思路: 我们一个页面。可能会有标题,分类,然后是数据滚动区scroll-view;1.整体用弹性布局display: flex;flex-flow: column;height: 100%;2.滚动区域 flex:1,scroll-view的height:100%。(发现flex:1,并不是真正的宽度或者高度) 看代码.重点看布局和样式!!
<template>
<view class="page">
<view>标题区域</view>
<view>分类搜索区域</view>
//滚动区域
<view class="container">
<scroll-view style="height: 100%;" @scrolltolower="crolltolowerEvent" show-scrollbar="false" scroll-y>
<view v-for="item in List"></view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
onShow() {
},
onLoad() {
},
data() {
return {
List:[], //数据
pageNo:1,
pageSize:10,
total:0
}
},
methods: {
//上拉加载更多事件
crolltolowerEvent() {
let pageNun = this.pageNo * this.pageSize
if (pageNun < this.total) {
this.pageNo += 1
// 请求接口加载数据 push
} else {
uni.showToast({
title: '没有更多数据了~',
duration: 2000
});
}
},
}
}
</script>
<style scoped>
.page{
display: flex;
flex-flow: column;
height: 100%;
}
.container{
flex: 1;
overflow-y: auto;
}
</style>
注意scroll-view上的height:100%
更多推荐
已为社区贡献3条内容
所有评论(0)