1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > swiper高度自适应_微信小程序之swiper轮播图片高度自适应

swiper高度自适应_微信小程序之swiper轮播图片高度自适应

时间:2022-08-22 02:43:38

相关推荐

swiper高度自适应_微信小程序之swiper轮播图片高度自适应

微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应。

效果图:

swiper轮播

wxml代码:

wxss代码:

.t-swiper image { width: 100%;}

js代码:

Page({ data: { img: [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg' ], indicatordots: true, //是否显示面板指示点 autoplay: true, //是否自动切换 interval: 5000, //自动切换时间间隔 duration: 500, //滑动动画时长 color: '#ffffff', //当前选中的指示点颜色 height: '' //swiper高度 }, goheight: function (e) { var width = wx.getSystemInfoSync().windowWidth //获取可使用窗口宽度 var imgheight = e.detail.height //获取图片实际高度 var imgwidth = e.detail.width //获取图片实际宽度 var height = width * imgheight / imgwidth + "px" //计算等比swiper高度 this.setData({ height: height }) }})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。