问题

轮播图是我们经常使用到的一个组件,element官方文档中也叫“跑马灯” el-carousel。官方示例中并没有使用图片来演示,而是用来一个150px的颜色块。将h3换成img标签即可实现轮播图片,但是如果固定高度,那么如果缩小浏览器窗口,或者使用移动设备来打开,那么固定高度就会显得非常别扭。所以必须检测浏览器宽度,来动态改变轮播图组件的宽度,即响应式。
在这里插入图片描述

解决

在csdn查了一下,找到了解决办法。
在这里插入图片描述
el-carousel组件高度绑定data中的数据:

<el-carousel :height="bannerHeight+'px'" type="card">
        <el-carousel-item v-for="item in urlList" :key="item.id">
          <img :src="item.url" alt="暂无图片">
        </el-carousel-item>
</el-carousel>

然后在mouted钩子函数中,检测浏览器宽度,如果改变,则相应的改变轮播图组件宽度,达到自适应的目的。

  mounted () {
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth
    this.bannerHeight = 600 / 1550 * this.screenWidth
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.bannerHeight = 600 / 1550 * this.screenWidth
    }
  }

轮播图片css设置:这里图片高度没有设置auto而是应该和父组件el-carousel高度一直,所以是inherit。
在这里插入图片描述
效果:
PC端默认宽度
在这里插入图片描述
移动端
在这里插入图片描述

原理

轮播图组件高度绑定为data中的数据。
mounted函数中检测浏览器宽度,动态改变data中的bannerHeight,从而实现改变轮播图组件的宽度。

Logo

前往低代码交流专区

更多推荐