小程序swiper图片自适应高度

最新推荐文章于 2024-03-25 19:36:52 发布

原创最新推荐文章于 2024-03-25 19:36:52 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了WXML中实现轮播图组件的具体代码，包括WXML的结构定义、WXSS的样式设置以及JS的逻辑处理。通过动态设置图片高度，确保了不同设备上的适配效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WXML：

<swiper indicator-dots="{{indicatorDots}}"  style="height:{{height}}px"

      class="swipe_container"     autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">  
         <block wx:for="{{imgArray}}">  
           <swiper-item>  
               <image src="{{item.filePath+item.fileName}}" mode="widthFix" class="slide-image" bindload="setContainerHeight"/>  
           </swiper-item>  

         </block>  

 </swiper>

WXSS：

.swipe_container{
  width:100%;

}
.slide-image{
  width:100%;
}

JS：

Page({
  data: {
    imgArray:[],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    height:0
  },
  setContainerHeight:function(e){
    var sysInfo = wx.getSystemInfoSync();//同步获取设备宽度
    var screenWidth = sysInfo.screenWidth; //获取屏幕的宽度
    var scale=(screenWidth * 2)/3
    this.setData({
      height: scale
    })
  },
})