微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例。
要求: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 }) },
全国7x24小时客服热线
所有故障均24小时内解决
项目一次性收费安心
技术人员均从业5年以上
通过技术营销传播企业服务价值
丰富的行业实战经验积累
基于需求研发多款产品
针对需求提供精细化服务