vue實現(xiàn)長圖垂直居上 vue實現(xiàn)短圖垂直居中
更新時間：2017年10月18日 14:14:19 作者：云行月翔
這篇文章主要為大家詳細介紹了vue彈性布局實現(xiàn)長圖垂直居上，vue實現(xiàn)短圖垂直居中，具有一定的參考價值，感興趣的小伙伴們可以參考一下
大致效果如下圖，只考慮垂直方向。長圖可以通過滾動條看，短圖居中效果，布局合理
html代碼(vue作用域內(nèi))：
<div class="box" v-for="item in previewImg"> <img :src="item" alt="" @load="checkHeight($event)"> </div>
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
watch 函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于Vue3中watch監(jiān)聽使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
今天小編就為大家分享一篇Vue實現(xiàn)頁面添加水印功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了詳解Vue源碼之數(shù)據(jù)的代理訪問，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue3中項目優(yōu)化方法詳解(Web?Worker的使用)
最近在做vue3的項目中,遇到了計算量龐大導(dǎo)致頁面響應(yīng)緩慢的問題,所以下面這篇文章主要給大家介紹了關(guān)于vue3中項目優(yōu)化方法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
vite官方文檔中有關(guān)于多頁面應(yīng)用模式如果配置的說明,下面這篇文章主要給大家介紹了關(guān)于vite多頁面配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
Animate.css這個動畫庫,很多的動畫在這個庫里面都定義好了,我們用的時候可以直接使用里面的類名就可以,下面我們就來看看如何在vue項目中使用Animate.css吧2023-08-08
前段時間一直在學(xué)習(xí)vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
最近在用Vue制作移動端項目,碰到了輪播圖的制作,接下來就讓小編一步一步帶大家動作制作吧,下面這篇文章主要給大家介紹了關(guān)于vue中使用swiper輪播圖的正確姿勢,需要的朋友可以參考下2022-06-06
vue-cli2.x舊版本卸載不掉的問題踩坑指南(附Vue腳手架安裝教程)
遇到一個Vuecli2腳手架卸載不了的問題,查了許多資料說的都比較復(fù)雜,所以下面這篇文章主要給大家介紹了關(guān)于vue-cli2.x舊版本卸載不掉的問題踩坑的相關(guān)資料,文中還附了Vue腳手架安裝教程,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vuex分模塊后,實現(xiàn)獲取state的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07