el-image 的懒加载是有条件的:存在属性 overflow: auto; 或者scroll 的父级元素,且通过滚动时间触发。 在el-carousel 中使用有问题,是 element-ui 的问题,他在判断是否需要加载时,是通过 isInContainer 方法。这个方法在获取 display: none; 元素下的元素位置数据时 ,是通过 getBoundingClientRect() 方法获取,这...
bannerHeight: 500, screenWidth: 1920, }; }, mounted() { this.setSize1(); const that = this; //监听浏览器窗口大小改变 window.addEventListener('resize', function() { var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; that.screenWidth = width...
上线后发现header-bar-text中的文字会时不时的模糊下,开始考虑是header-bar-text中频繁刷新的时间引起的,去除了时间后发现仍然有问题。最终发现,模糊的频率与下方el-carousel切换的频率一样。给el-caroursel增加transform后文恢复正常: .el-carousel{ transform: translate3d(0,0,0) } ©著作权归作者所有,转载或内...
<el-carousel :interval="2000" indicator-position="none" id="el-carousel"> <el-carousel-item v-for="item in 4" :key="item"> </el-carousel-item> </el-carousel> </template> export default { data() { return { bannerHeight: 700, screenWidth: 1920, }; }, mounted() { this.set...
el-carousel导致页面顶部字体闪烁问题 问题描述。网站顶部有个展示 "今天是xxx年xxx月xxx日 00:00:00"的动态时钟。下方使用ELementUI的el-carousel做的动态图片banner。 headerBar的 css如下, .header-bar{ width: 100%; height: 30px; position: absolute; z-index: 1; left: 0px; top: 0px; box-sizing...
解决这个问题的方法是将el-image的lazy属性去掉,并设置fit="contain"来保证图片在容器内居中显示。同时,为了让图片高度与el-carousel一致,需要将el-image的高度设置为100%。以下是修改后的代码示例: <el-carousel height="170px"> <el-carousel-item> <el-image style="width: 100%; height: 100%" fit="...
用element-ui的走马灯carousel轻松实现自适应全屏banner图 解决el-carousel默认高度300问题 组件代码 <template> <el-carousel :interval="2000" indicator-position="none" id="el-carousel"> <el-carousel-item v-for="item in 4" :key="item">
vue3+element-plus使用el-carousel 实现轮播图场景 因为刚开始页面渲染数据还没加载过来,所以第一页无数据。 只要el-carousel-item里的...