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