版权声明:图文并茂的微信小程序教程!欢迎转载,请保留作者名字和链接;商业合作请联系子恒老师助理 QQ : 2334512685 https://blog.csdn.net/towtotow/article/details/82875633
在开发大秦视频付费系统时,
使用到layui的轮播组件carousel,
默认高度是280px,
在电脑端效果可以。
但是在手机移动端,
就会有空白,
所以会通过代码,
让layui轮播自动调整高度。
下面的代码参考了官网中的内容
https://fly.layui.com/jie/14318/
css代码
<style>
/*轮播*/
.layui-carousel>[carousel-item]{
overflow: visible;
}
.layui-carousel>[carousel-item]>*{
height: auto;
}
.layui-carousel-ind{
margin-top: -20px;
top: auto;
bottom: 10px;
}
</style>
html代码
<div class="layui-container">
<div class="layui-row">
<div class="layui-carousel" id="imgbox">
<div carousel-item id="imgH">
<div class="img-item"><a href="#"><img src="#" /></a></div>
</div>
</div>
</div>
</div>
js代码
layui.use(['carousel'], function(){
var carousel = layui.carousel;
var imgH = document.getElementById('imgbox').querySelector('.img-item').offsetHeight;
document.getElementById('imgH').style.height = imgH+'px';
window.onresize = function () {
var imgH = document.getElementById('imgbox').querySelector('.img-item').offsetHeight;
document.getElementById('imgH').style.height = imgH+'px';
};
//建造实例
carousel.render({
elem: '#imgbox'
,width: '100%' //设置容器宽度
,arrow: 'always' // 悬停显示箭头
,indicator: 'inside'
,height: 'auto'
});
});