最近项目中需要写到一个轮播图，我直接套用的了element-ui的走马灯，但是走马灯的高度是固定写死的，这样页面缩放就会塌陷，没办法实现屏幕自适应，所以我就想能不能根据图片的宽高比例，动态获取图片的高度，实现响应式布局，下面给出解决办法：
1. 给图片加载load加载事件，并获取图片第一次渲染时的高度

因为是参照的大佬写的博客自己改造的，下来去了解了nextTick的基本用法：
链接: 官方文档：vue.js的异步更新队列.
简单总结下nextTick的使用场景：
*1.在vue声明周期的created()钩子函数进行的dom操作一定要放在Vue.nextTick()的回调函数; ---原理:在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
*2.在数据变化后要执行某个操作,而这个操作需要使用随数据改变而改变的dom结构的时候,这个操作都应该放进$nextTick()回调函数中

2. 增加监听事件，当视口发生改变时，得到图片改变的高度动态赋值给走马灯的height值

//增加监听事件,当视口发生改变时,得到此时的图片高度赋值给bannerHeight
  mounted() {
    this.imgload();
    window.addEventListener(
      "resize",
      () => {
        this.bannerHeight = this.$refs.bannerHeight[0].height;
        this.imgload();
      },
      false
    );
  },

这样一个自适应页面的走马灯轮播图就可以完成啦~