四川盐亭网站制作公司

vue如何实现长图垂直居上

这篇文章主要介绍vue如何实现长图垂直居上，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联拥有十余年成都网站建设工作经验,为各大企业提供做网站、成都网站制作服务，对于网页设计、PC网站建设（电脑版网站建设）、成都app软件开发公司、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、主机域名等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

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

vue如何实现长图垂直居上

html代码(vue作用域内)：


  

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

}

}

以上是“vue如何实现长图垂直居上”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


文章名称：vue如何实现长图垂直居上
转载来源：http://scyanting.com/article/gjiegi.html

其他资讯