300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > flex vue 垂直居中居上_vue 弹性布局 实现长图垂直居上 短图垂直居中

flex vue 垂直居中居上_vue 弹性布局 实现长图垂直居上 短图垂直居中

时间:2020-07-28 13:26:45

相关推荐

flex vue 垂直居中居上_vue 弹性布局 实现长图垂直居上 短图垂直居中

vue 弹性布局 实现长图垂直居上,短图垂直居中

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

html代码(vue作用域内):

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');

}

}

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。