微信小程序 swiper 轮播图 高度自适应
发布时间:-07-20 15:34,
浏览次数:588
, 标签:
swiper
小程序中使用swiper组件 ,实现轮播图高度自适应效果。
先上最终实现效果图
先看一下微信官方文档介绍 swiper 组件
https://developers./miniprogram/dev/component/swiper.html
代码部分
wxml:
autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}"
bindchange='bindchange' style="height:{{imgheights[current]}}rpx;">
wx:for="{{imgUrls}}">
class='image-view'
style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"
bindload="imageLoad" data-src='{{item}}'>
js:
Page({ data: { imgheights: [], current: 0, imgwidth: 750, imgUrls: [
'/images/0928/tooopen_sy_143912755726.jpg',
'/images/0818/tooopen_sy_175866434296.jpg',
'/view/photo/l/public/p2494946035.webp',
'/images/0818/tooopen_sy_175833047715.jpg', ], },
imageLoad: function (e) { //获取图片真实宽度 var imgwidth = e.detail.width, imgheight =
e.detail.height, src = [], //宽高比 ratio = imgwidth / imgheight;
console.log(e.target.dataset['src']) src.push(e.target.dataset['src'])
console.log(src) //计算的高度值 var viewHeight = 750 / ratio; var imgheight =
viewHeight var imgheights = this.data.imgheights //把每一张图片的高度记录到数组里
imgheights.push(imgheight) this.setData({ imgheights: imgheights, }) },
bindchange: function (e) { this.setData({ current: e.detail.current }) }, })
思路是这样滴,,,在图片 加载时通过 bindload imageLoad 将每张图片的 宽高取出,计算好高度,存入数组。swiper 组件
通过bindchange 监听图片切换 将当前图片的在数组中的位置(swiper组件中的位置)赋值 current ,以此动态的改变 页面
图片和swiper的高度。。。 但是,无意中发现一个问题,imageLoad 中打印 图片的 src 发现
顺序有时和图片真实的顺序是不一致的,把大图放在数组前面,但是却是第三个第四个加载出来的。这就坑了,,导致加载出来计算的图片高度数组顺序和真实的不一致。bindload
获取的图片顺序不正确,不知道是不是因为图片资源大小的缘故,故加了一个参数,严谨一点。。如果接口提供的参数里返回了图片的原始宽高 也可以不用这么做。
在imageLoad中打印 index 哇 果然 顺序是有误的。
最终代码
autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}"
bindchange='bindchange' style="height:{{imgheights[current]}}rpx;">
wx:for="{{imgUrls}}" wx:key="{{index}}">
src="{{item}}" class='image-view'
style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"
bindload="imageLoad" data-src='{{item}}' data-index='{{index}}'>
Page({ data: { imgheights: [], current: 0, imgwidth: 750, imgUrls: [
'/view/photo/l/public/p2494946035.webp',
'/images/0928/tooopen_sy_143912755726.jpg',
'/images/0818/tooopen_sy_175866434296.jpg',
'/images/0818/tooopen_sy_175833047715.jpg', ], },
imageLoad: function (e) { //获取图片真实宽度 var imgwidth = e.detail.width, imgheight =
e.detail.height, //宽高比 ratio = imgwidth / imgheight; //计算的高度值 var viewHeight =
750 / ratio; var imgheight = viewHeight var imgheights = this.data.imgheights
//把每一张图片的高度记录到数组里 imgheights[e.target.dataset['index']] = imgheight;// 改了这里
赋值给当前 index this.setData({ imgheights: imgheights, }) }, bindchange: function
(e) { this.setData({ current: e.detail.current }) }, })
这次没什么问题了 把图片较大的放在数组前面,检验一下就知道了