vue实现长图垂直居上 vue实现短图垂直居中
更新时间：2017年10月18日 14:14:19 作者：云行月翔
这篇文章主要为大家详细介绍了vue弹性布局实现长图垂直居上，vue实现短图垂直居中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
大致效果如下图，只考虑垂直方向。长图可以通过滚动条看，短图居中效果，布局合理
html代码(vue作用域内)：
<div class="box" v-for="item in previewImg"> <img :src="item" alt="" @load="checkHeight($event)"> </div>
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');
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
watch 函数用来侦听特定的数据源,并在回调函数中执行副作用,下面这篇文章主要给大家介绍了关于Vue3中watch监听使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
今天小编就为大家分享一篇Vue实现页面添加水印功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了详解Vue源码之数据的代理访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最近在做vue3的项目中,遇到了计算量庞大导致页面响应缓慢的问题,所以下面这篇文章主要给大家介绍了关于vue3中项目优化方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
vite官方文档中有关于多页面应用模式如果配置的说明,下面这篇文章主要给大家介绍了关于vite多页面配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以,下面我们就来看看如何在vue项目中使用Animate.css吧2023-08-08
前段时间一直在学习vue,开始记录一下遇到的问题,下面这篇文章主要给大家介绍了关于vue项目中less的一些使用小技巧,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
最近在用Vue制作移动端项目,碰到了轮播图的制作,接下来就让小编一步一步带大家动作制作吧,下面这篇文章主要给大家介绍了关于vue中使用swiper轮播图的正确姿势,需要的朋友可以参考下2022-06-06
vue-cli2.x旧版本卸载不掉的问题踩坑指南(附Vue脚手架安装教程)
遇到一个Vuecli2脚手架卸载不了的问题,查了许多资料说的都比较复杂,所以下面这篇文章主要给大家介绍了关于vue-cli2.x旧版本卸载不掉的问题踩坑的相关资料,文中还附了Vue脚手架安装教程,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vuex分模块后,实现获取state的值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论