搜技巧 | 只提供最简单有效的方法与技巧

分享简单实用的方法与技巧
当前位置:搜技巧 > 网站开发 >


微信小程序“轮播图swiper图片高度怎么改”

  在小程序中,我们可以看到基本的轮播图高度是150px,那如果想要自定义swiper高度呢?

  1) index.wxml 添加 class="swiper" 和 mode="widthFix" ,如下:

微信小程序轮播图swiper

  2) index.wxss 添加 .page swiper{ } 和 .slide-image{ },如下:

      .page swiper {

               height: 475rpx;

       }

      .slide-image {

               width: 100%;

               height: 100%;

       }

  我这边的图片尺寸是 800px * 500px ,其中500px 高度决定了你的轮播图展示高度

  最终效果如下:

微信小程序轮播图高度

分享:
如果文章帮助到你了,请点击打打赏小搜下小搜,感谢!