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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
JS分页效果示例
2013/10/11 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
js实现无缝滚动图
2017/02/22 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
django数据库自动重连的方法实例
2019/07/21 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
英语专业推荐信
2013/11/16 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
文化建设工作方案
2014/05/12 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
培训心得体会怎么写
2016/01/25 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
i7 6700处理器相当于i5几代
2022/04/19 数码科技