本文主要為大家詳細介紹了vue彈性佈局實現長圖垂直居上,vue實現短圖垂直居中,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能幫助到大家。
大致效果如下圖,只考慮垂直方向。長圖可以透過捲軸看,短圖居中效果,佈局合理
html程式碼(vue作用域內):
<p class="box" v-for="item in previewImg"> <img :src="item" alt="" @load="checkHeight($event)"> </p>
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'); } } }
相關建議:
以上是vue實作長圖垂直居上短圖垂直居中的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!