微信小程序怎么实现swiper高度自适应

本篇内容主要讲解“微信小程序怎么实现swiper高度自适应 ”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序怎么实现swiper高度自适应 ”吧!

要求：swiper高度自适应

wxml

<view class='swiper'><swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}' bindchange="bindchange"  circular="{{circular}}" style="height:{{imgheights[current]}}rpx;"><block wx:for='{{imgList}}' wx:key="{{index}}">  <swiper-item><image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad"/>  </swiper-item>  </block></swiper>  </view>

wxss

.swiper image {  width: 100%;  height: auto;}

wxjs

data: {    //图片地址    imgList: ['/images/wyh-img_bg.png', '/images/wyh-img8.png', '/images/wyh-img_shop1.png', '/images/wyh-img_bg1.png'],    //是否采用衔接滑动      circular: true,    //是否显示画板指示点      indicatorDots: false,    //选中点的颜色      indicatorcolor: "#000",    //是否竖直      vertical: false,    //是否自动切换      autoplay: true,    //自动切换的间隔    interval: 2500,    //滑动动画时长毫秒      duration: 100,　　    //所有图片的高度  （必须）    imgheights: [],    //图片宽度     imgwidth: 750,    //默认  （必须）    current: 0     },imageLoad: function (e) {//获取图片真实宽度      var imgwidth = e.detail.width,      imgheight = e.detail.height,      //宽高比        ratio = imgwidth / imgheight;      console.log(imgwidth, imgheight)    //计算的高度值      var viewHeight = 750 / ratio;    var imgheight = viewHeight;    var imgheights = this.data.imgheights;    //把每一张图片的对应的高度记录到数组里      imgheights[e.target.dataset.id] = imgheight;    this.setData({      imgheights: imgheights    })  },  bindchange: function (e) {    // console.log(e.detail.current)    this.setData({ current: e.detail.current })  },

到此，相信大家对“微信小程序怎么实现swiper高度自适应 ”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！