省流


.showSwiperContet {
	height: auto !important;
	::v-deep.uni-swiper-wrapper {
		overflow-y: visible !important;
		.uni-swiper-slides{
			position: static !important;
			height: auto !important;
		}
		.uni-swiper-slide-frame{
			position: static !important;
			height: auto !important;
			display: flex;
		}
		
	}
	uni-swiper-item{
		flex: 0 0 100%;
		overflow-y: visible !important;
		position: static !important;
		height: auto !important;
		transform:none !important;
	}
}

引出问题

最近在使用uniapp进行开发的时候遇到一个问题,我的需求是制作一个多分类列表,而且在列表的顶部还有一部分内容

这很简单,我凭借自己扎实的前端基本功很快的就绘制好了页面

列表部分我使用uview的tabs组件,加上uniapp自带的swiper组件,然后在每个swiper-item里都套一个scroll-view,很快就完成了这个页面,但是这样页面就只有一半的部分可以滚动,上面的数据占据的空间越多,下面的列表可以滚动的区域就越少.

这个也简单,只要把整个页面看作一个可以滚动的视图,然后用swiper-item将大的列表撑起来,这不就行了?

不一会,新的功能就实现了

swiper中的内容会被隐藏

解决方案:使用样式穿透修改样式,不让它隐藏

页面被撑起的高度是按照swiper-item中最高的一个算的,这就可能导致一个列表里面什么数据也没有,页面却有长长的滚动条解决方案:只展示用户能看到的数据,用户看不到的数据用v-show隐藏起来

然后然后然后,新的需求又来了

在滚动到顶时,需要能看见分类,从而方便用户操作,这个需求我一看就知道,使用粘性布局!

.u-tabs {
        position: sticky;
        top: calc(var(--gap-mini) + var(--window-top));
        z-index: 2;
    }

可就这这个时候,翻车了!这个粘性布局怎么也不肯失效,于是我翻代码结构,发现竟然是swiper搞的鬼

粘性布局只作用于父级,当父级有部分被隐藏,而隐藏的值大于等于top:或者bottom的值时粘性布局就会生效,且粘性布局的元素不会超出父级的显示区域,但是由于swiper的实现使用了绝对定位,无法撑起父级因此导致粘性布局失效,这时候我们可以使用js来控制,或者让swiper能够撑起父级.我自然是选择后者,经过一系列调试,最后写出了上面的css代码

干货 ! 一个class将uniapp的swiper组件改成自适应高度

省流

引出问题