小程序之 swiper高度根据图片高度变化

今天做的是这个效果⬇️  swiper的高度根据图片的高度而改变

小程序之 swiper高度根据图片高度变化小程序之 swiper高度根据图片高度变化

wxml:
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" bindchange="bindchange" style="height:{{imgheights[current]}}rpx;">
  <block wx:for='{{imgUrls}}' wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" data-id='{{index}}' mode="widthFix" bindload="imageLoad" style='width:100%;' bindtap='imgYu' data-src="{{item}}" data-list="{{item}}"/>
</swiper-item>
</block>
</swiper>
data: {
pl: false,
inputMB: false,
zanimg: '../../../images/xin.png',
classzan: '',
nu:false,
swp:,
imgUrls: [ ],
hd: false,
hd1: false,
back:false,
zz: false,
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUse1: wx.canIUse('button.open-type.openSetting'), //是否采用衔接滑动
circular: true,
//是否显示画板指示点
indicatorDots: true,
//选中点的颜色
indicatorcolor: "#000",
//是否竖直
vertical: false,
//滑动动画时长毫秒
duration: ,
//所有图片的高度
imgheights: [],
//图片宽度
imgwidth: ,
//默认
current:
},
imageLoad: function (e) {//获取图片真实宽度
var imgwidth = e.detail.width,
var imgheight = e.detail.height,
//宽高比
var ratio = imgwidth / imgheight;
//计算的高度值
var viewHeight = / ratio;
var imgheight = viewHeight;
var imgheights = this.data.imgheights;
console.log("imgheights11", imgheights)
//把每一张图片的对应的高度记录到数组里 +90是因为我给图片了一个width:100% 让图片宽撑满屏幕 如把100%去掉这个+90可去掉
imgheights[e.target.dataset.id] = imgheight+;
console.log("imgheights22", imgheights)
this.setData({
imgheights: imgheights
})
},
bindchange: function (e) {
this.setData({ current: e.detail.current})
},
 //图片点击事件 点击图片放大
imgYu: function(event) {
var src = event.currentTarget.dataset.src; //获取data-src
var imgList = event.currentTarget.dataset.list; //获取data-list
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: [src]
})
},

代码参考:梦幻飞雪

上一篇:.NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator


下一篇:iOS开发 iOS10推送必看(基础篇)-转