他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

Vue框架設(shè)置響應(yīng)式布局

2019-5-29    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

最近折騰自己的網(wǎng)站,在自適應(yīng)方面發(fā)現(xiàn)有了很多新的方法,感嘆前端的技術(shù)真是日新月異,從以前只能這樣,到現(xiàn)在除了這樣,還可以那樣,甚至再那樣......技術(shù)永無止境啊。

回到主題,自適應(yīng)響應(yīng)式布局這個(gè)話題古老而新穎,從最早的不同分辨率的屏幕,到現(xiàn)在遍布各個(gè)生活角落的移動(dòng)設(shè)備,響應(yīng)式布局已經(jīng)成了幾乎所有互聯(lián)網(wǎng)公司必備的條件。在我的映像中,bootstrap一直是響應(yīng)式的頭號(hào)選擇,的確,其中的各種xl,xs,柵格布局讓響應(yīng)式變得很容易。

話說,這Vue做響應(yīng)式,其實(shí)一點(diǎn)都不復(fù)雜:一個(gè)生命周期鉤子,一個(gè)條指令,一套js判斷語句解決,說到這,高手們應(yīng)該早已經(jīng)明白如何操作了, 這篇文章就給廣大剛?cè)腴T的同學(xué)們拓寬一下吧(不熟悉Vue的同學(xué),還是先惡補(bǔ)一下Vue基礎(chǔ)吧)。

一個(gè)生命周期鉤子——mounted:掛載時(shí)操作;一條指令——v-show(本例中采用,非絕對(duì)):根據(jù)條件顯示;一套js判斷語句:if/else或者switch/case。具體操作起來很簡單:(代碼直接展示)

<!--這是一段導(dǎo)航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(){
//可用于設(shè)置自適應(yīng)屏幕,根據(jù)獲得的可視寬度(兼容性)判斷是否顯示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移動(dòng)設(shè)備中不顯示搜索欄(search-part)部分,那么利用v-show,和mounted配合,在掛載時(shí)檢測一下屏幕可視寬度,如果小于1000,則認(rèn)為是手機(jī),v-show設(shè)為false,不顯示即可。

看,很簡單吧,簡單到我覺得自己好像在忽悠。其實(shí)到這里,原理已經(jīng)說完,具體的應(yīng)用大家可以自行發(fā)揮,而且也不一定就用v-show,我這里是為了顯示與否,如果大家想添加樣式什么的,還可以寫別的,甚至于計(jì)算屬性,watch都可以。只要記住在掛載的時(shí)候完成即可,不然頁面會(huì)有跳動(dòng),不利于體驗(yàn)。

可能有人會(huì)問,用css的@media就可以完成了,為啥用js,我這里想說的是,我并沒有否認(rèn)@media,這里只是寫出更多一種方式,同時(shí)結(jié)合一下現(xiàn)在很火的前端框架。多一種方法,就多一種解決思路,不至于再回到以前"只能這樣"的道路上。具體到實(shí)際應(yīng)用中,當(dāng)然是最適合的方法為主。前端水深,前端的路子也越來越多,越來也豐富,敞開思維,就會(huì)看見不同的天空。

ps一句,js確實(shí)需要刷新頁面重新加載才會(huì)顯示,也就是說如果用戶將頁面從大屏移動(dòng)到小屏幕,就可能出現(xiàn)布局不響應(yīng)問題,但是在實(shí)際使用中,這種情況幾乎不會(huì)出現(xiàn),因?yàn)橛脩舨荒芸赡軐㈦娔X打開的網(wǎng)頁,直接移動(dòng)到手機(jī)上,操作永遠(yuǎn)都是重新打開,所以js,css在顯示效果上是沒有區(qū)別的(當(dāng)然如果js太過復(fù)雜,性能會(huì)有影響)。另外,文中方法的兼容性問題,只要支持Vue的瀏覽器,都沒問題。

就說到這吧,歡迎大神指正,不勝感激!
藍(lán)藍(lán)設(shè)計(jì)ssll180.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

日歷

鏈接

個(gè)人資料

存檔