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 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
vue中英文切换实例代码
Jan 21 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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图片上传程序
2008/03/27 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
jquery的ajax请求全面了解
2013/03/20 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
JavaScript实现简单评论功能
2017/08/17 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
详解Node.js异步处理的各种写法
2019/06/09 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
演讲稿开场白
2014/01/13 职场文书
企业申诉管理制度
2014/01/30 职场文书
离职证明格式样本
2015/06/12 职场文书
2015中学学校工作总结
2015/07/20 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
python实现简易自习室座位预约系统
2021/06/30 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python