用element-ui的走马灯carousel轻松实现自适应全屏banner图

Mr_houzi 发布于2019-08-05 13:49 / 1350人阅读

摘要：写在前面网站轮播图建议使用组件，非常方便快捷。接手一个项目，轮播图是用的实现的，看起来效果还不错，只是固定宽高，并未做适配，于是将就代码做下修改，以适配各种显示器屏幕。

写在前面：网站轮播图建议使用swiper组件，非常方便快捷。

接手一个项目，轮播图是用element-ui的carousel实现的，看起来效果还不错，只是固定宽高，并未做适配，于是将就代码做下修改，以适配各种显示器屏幕。

bannerHeight属性用来控制banner层的高度，计算方式：根据浏览器的宽度计算等比的图片高度：

setSize: function () {
    this.bannerHeight = 740 / 2560 * this.screenWidth
    if(this.bannerHeight > 740) this.bannerHeight = 740
    if(this.bannerHeight < 360) this.bannerHeight = 360
  }

给img加样式：

.bannerImg{
    width: 100%;
    height: inherit;
    min-height: 360px;
    min-width: 1400px;
  }

大功告成！为了让改变浏览器也能适配，监听一下浏览器resize：

mounted () {
  this.setSize();
  const that = this;
  window.addEventListener("resize", function() {
    that.screenWidth = $(window).width();
    that.setSize();
  }, false);
}

超融合服务器 idc机房托管自适应阈值的流量算法 html的宽度自适应 banner焦点图阿里云的播放器自适应播放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57600.html

node-vue前后端分离记录

摘要：用于列表渲染，可以循环遍历数组和对象注意目前指的是的迭代事件绑定，简写相当于与相比，避免了闪现的问题。 node vue项目开发看了近一周的vue开发，有诸多感触，我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现，接触到的东西多了，学习起来就是容易很多，vue的指令我能个联想到angular的指令，vue组件化设计类似于react的组件化设计，包...

lowett 2019-08-22 13:41 评论0 收藏0
React组件库封装初探--Modal

摘要：组件实现基本简介类似于实现的组件，首先基本结构分析遮罩层内容包装层主体内容层，包含固定定位布局，全屏遮盖显示，所以内容自定义实现功能目标两种调用方式一些内容遮罩层和的显示与否，单击是否可关闭其他必备功能结构布局攻克基本布局遮 Madal组件实现基本简介 showImg(https://segmentfault.com/img/bVbqhvl?w=1848&h=834); 类似于an...

ybak 2019-08-23 16:18 评论0 收藏0
React组件库封装初探--Modal

摘要：组件实现基本简介类似于实现的组件，首先基本结构分析遮罩层内容包装层主体内容层，包含固定定位布局，全屏遮盖显示，所以内容自定义实现功能目标两种调用方式一些内容遮罩层和的显示与否，单击是否可关闭其他必备功能结构布局攻克基本布局遮 Madal组件实现基本简介 showImg(https://segmentfault.com/img/bVbqhvl?w=1848&h=834); 类似于an...

codecraft 2019-08-02 16:08 评论0 收藏0
React组件库封装初探--Modal

摘要：组件实现基本简介类似于实现的组件，首先基本结构分析遮罩层内容包装层主体内容层，包含固定定位布局，全屏遮盖显示，所以内容自定义实现功能目标两种调用方式一些内容遮罩层和的显示与否，单击是否可关闭其他必备功能结构布局攻克基本布局遮 Madal组件实现基本简介 showImg(https://segmentfault.com/img/bVbqhvl?w=1848&h=834); 类似于an...

elisa.yang 2019-08-05 16:33 评论0 收藏0
面试官(6): 写过『通用前端组件』吗?

摘要：很久没上掘金发现草稿箱里存了好几篇没发的文章最近梳理下发出来往期面试官系列如何实现深克隆面试官系列的实现面试官系列前端路由的实现面试官系列基于数据劫持的双向绑定优势所在面试官系列你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测很久没上掘金,发现草稿箱里存了好几篇没发的文章,最近梳理下发出来往期面试官系列(1): 如何实现深克隆面试官系列(2): Event Bus...

waltr 2019-05-27 17:43 评论0 收藏0