微信小程序 - 自适应swiper高度(非组件)

时间:2022-04-22 03:56:45

微信小程序 - 自适应swiper高度(非组件)

微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情

原理:

利用css3 横轴滚动属性overflow:scroll,设置死swiper高度为100vh,这时会产生css3滚动条,隐藏掉swiper-item::-webkit-scrollbar 即可.

详情示例见:https://www.cnblogs.com/cisum/p/10443412.html

 1 swiper {
2 width: 100%;
3 height: 100vh;
4 padding: 0;
5 }
6
7 swiper-item {
8 line-height: 350px;
9 overflow: scroll;
10 }
11
12 swiper-item::-webkit-scrollbar {
13 display: none;
14 }