提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

微信小程序 - 自适应swiper高度（非组件）

组件微信程序 适应 高度 swiper
2023-09-11 14:14:36 时间

 

 

 

 

 

微信小程序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 }

　　

相关文章