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 相关文章推荐
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python机器学习之KNN分类算法
2018/08/29 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
在Python中表示一个对象的方法
2019/06/25 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
高中毕业生的个人自我评价
2014/02/21 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
2015团员个人年度总结
2015/11/24 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers
MySQL数据管理操作示例讲解
2022/12/24 MySQL