小程序scroll-view 固定高度实现触底效果

kilito_01

已于 2022-07-26 11:21:00 修改

阅读量717

点赞数 2

分类专栏： js vue 文章标签：前端小程序

于 2022-07-13 16:40:15 首次发布

本文链接：https://blog.csdn.net/kilito_01/article/details/125767189

版权

js 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

首先就是在最外面的view  设置
        display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
要设置宽高才可以限制scroll-view 的高度
然后就是在scroll-view 上设置
            flex: 1;
			overflow: hidden;
一定要设置overflow 不然不生效
这样设置后，就可以看看scroll-view 的高度是否都是固定的 在xr下是808的固定高度

会有一个问题，就是内容没有满屏的情况下也会滚动 
原因是因为里面的list列表第一个设置了margin-top
可以给父容器设置padding，将内容挤下来
记得同时设置box-sizeing