vue垂直布局_vue实现长图垂直居上 vue实现短图垂直居中
生活随笔
收集整理的這篇文章主要介紹了
vue垂直布局_vue实现长图垂直居上 vue实现短图垂直居中
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
大致效果如下圖，只考慮垂直方向。長圖可以通過滾動(dòng)條看，短圖居中效果，布局合理
html代碼(vue作用域內(nèi))：
css代碼：
.box{
height: 100%;//如高度等于網(wǎng)頁高度
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.swiper-slide.long{
justify-content: flex-start;
}
js代碼(vue作用域內(nèi)，使用jquery)：
methods: {
checkHeight:function (event) {
var el=$(event.currentTarget);
el.parent().removeClass('long');
//this.CH 為網(wǎng)頁高度
if(el.height()>this.CH){
el.parent().addClass('long');
}
}
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。
時(shí)間： 2017-10-16
總結(jié)
以上是生活随笔為你收集整理的vue垂直布局_vue实现长图垂直居上 vue实现短图垂直居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 单纯形法求最小值的检验数_【运筹学】单纯
- 下一篇： oracle基本的查询语句,Oracle