vue实现长图垂直居上 vue实现短图垂直居中

2019-11-19 15:08:31

字体：大中小

来源：转载

供稿：网友

大致效果如下图，只考虑垂直方向。长图可以通过滚动条看，短图居中效果，布局合理

html代码(vue作用域内)：

<div class="box" v-for="item in previewImg">  <img :src="item" alt="" @load="checkHeight($event)"></div>

css代码：

.box{ height: 100%;//如高度等于网页高度 overflow: auto; display: flex; flex-direction: column; justify-content: space-around;}.swiper-slide.long{ justify-content: flex-start;}

js代码(vue作用域内，使用jquery)：

methods: {checkHeight:function (event) {  var el=$(event.currentTarget);  el.parent().removeClass('long');　　//this.CH 为网页高度  if(el.height()>this.CH){    el.parent().addClass('long');  }}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS去掉字符串中所有的逗号

下一篇：vue router下的html5 history在iis服务器上的设置方法