vue实现长图垂直居上 vue实现短图垂直居中


Posted in Javascript onOctober 18, 2017

大致效果如下图,只考虑垂直方向。长图可以通过滚动条看,短图居中效果,布局合理

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');
  }

}

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 #Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 #Javascript
VUE长按事件需求详解
Oct 18 #Javascript
vue router仿天猫底部导航栏功能
Oct 18 #Javascript
Node做中转服务器转发接口
Oct 18 #Javascript
Vue组件之Tooltip的示例代码
Oct 18 #Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 #Javascript
You might like
php通过COM类调用组件的实现代码
2012/01/11 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python类定义的讲解
2013/11/01 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python入门教程之if语句的用法
2015/05/14 Python
python实现kNN算法
2017/12/20 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
公司人力资源的自我评价
2014/01/02 职场文书
就业自我评价
2014/02/04 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
户外活动总结范文
2014/04/30 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
永远是春天观后感
2015/06/12 职场文书
房屋所有权证明
2015/06/19 职场文书