18801051825的个人主页

http://www.qtcn.org/bbs/u/185984  [收藏] [复制]

18801051825

  • 2

    关注

  • 8

    粉丝

  • 117

    访客

  • 等级:新手上路
  • 总积分:0
  • 男,2011-01-01

最后登录:2019-06-26

更多资料

日志

Vue框架设置响应式布局

2019-06-05 09:10
最近折腾自己的网站,在自适应方面发现有了很多新的方法,感叹前端的技术真是日新月异,从以前只能这样,到现在除了这样,还可以那样,甚至再那样......技术永无止境啊。

回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择,的确,其中的各种xl,xs,栅格布局让响应式变得很容易。

话说,这Vue做响应式,其实一点都不复杂:一个生命周期钩子,一个条指令,一套js判断语句解决,说到这,高手们应该早已经明白如何操作了, 这篇文章就给广大刚入门的同学们拓宽一下吧(不熟悉Vue的同学,还是先恶补一下Vue基础吧)。

一个生命周期钩子——mounted:挂载时操作;一条指令——v-show(本例中采用,非绝对):根据条件显示;一套js判断语句:if/else或者switch/case。具体操作起来很简单:(代码直接展示)

<!--这是一段导航html-->
<nav id="nav-part" class="easyUtil-backImgPostion easyUtil-flexContainerRow">
<ul class="easyUtil-flexContainerRow">
<li class="nav-list" :class="nav.className" v-for="(nav,i) in navs">
<a :href="nav.href">{{nav.name}}</a>
</li>
</ul>
<div id="serach-part" v-show="show"><input type="search" id="search" :placeholder="placeholder" class="easyUtil-input"><button id="searchBtn" class="easyUtil-btn">{{btn}}</button></div>
</nav>
var head = new Vue({
el : "#head",
data : {
        //此处省略一千字
show : true
},
mounted : function(){
//可用于设置自适应屏幕,根据获得的可视宽度(兼容性)判断是否显示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移动设备中不显示搜索栏(search-part)部分,那么利用v-show,和mounted配合,在挂载时检测一下屏幕可视宽度,如果小于1000,则认为是手机,v-show设为false,不显示即可。

看,很简单吧,简单到我觉得自己好像在忽悠。其实到这里,原理已经说完,具体的应用大家可以自行发挥,而且也不一定就用v-show,我这里是为了显示与否,如果大家想添加样式什么的,还可以写别的,甚至于计算属性,watch都可以。只要记住在挂载的时候完成即可,不然页面会有跳动,不利于体验。

可能有人会问,用css的@media就可以完成了,为啥用js,我这里想说的是,我并没有否认@media,这里只是写出更多一种方式,同时结合一下现在很火的前端框架。多一种方法,就多一种解决思路,不至于再回到以前"只能这样"的道路上。具体到实际应用中,当然是最适合的方法为主。前端水深,前端的路子也越来越多,越来也丰富,敞开思维,就会看见不同的天空。

ps一句,js确实需要刷新页面重新加载才会显示,也就是说如果用户将页面从大屏移动到小屏幕,就可能出现布局不响应问题,但是在实际使用中,这种情况几乎不会出现,因为用户不能可能将电脑打开的网页,直接移动到手机上,操作永远都是重新打开,所以js,css在显示效果上是没有区别的(当然如果js太过复杂,性能会有影响)。另外,文中方法的兼容性问题,只要支持Vue的浏览器,都没问题。

就说到这吧,欢迎大神指正,不胜感激!
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 cs界面设计 ipad界面设计 包装设计 图标定制 用户体验 、交互设计、 网站建设 平面设计服务





阅读全文
分类:默认分类|回复:0|浏览:64|全站可见|转载
 

Powered by phpwind v8.7 Certificate Copyright Time now is:06-26 11:42
©2005-2016 QTCN开发网 版权所有 Gzip disabled