結合自己專案的需求進行修改
// 封裝了wate***llflow.vue子元件
="wate***ll_container"
>
v-for=
"(item, index) in wate***lllist"
:key=
"index"
class
="wate***ll_item"
:style=
"">
="coverimg"
>
"item.src" alt=
"":height=
"item.imgheightpercent + '%'"
>
<
/cover>
<
/div>
="content"
>
="title line2"
>
528㎡讓人驚豔的混搭魅力<
/div>
="info flex flex-between flex-middle"
>
="designer flex-item-3"
>
"@/assets/images/靈感詳情.png" alt=""/
>
="name"
>ffstudsssssssssssio<
/span>
<
/div>
="watcher flex-item-2"
>
"@/assets/images/icon/列表-瀏覽量.png" alt=""/
>
3.5k<
/span>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/template>
import cover from
"@/components/cover"
;export
default
, props:,}
,},data()
;},mounted()
, methods:
this
.imgpreloading()
;},// 預載入
imgpreloading()
;// 高度按比例縮放
const imgheight =
(this
.imgwidth / aimg.width)
* aimg.height;
// 獲取高度比
itemdata.imgheightpercent =
(imgheight /
this
.imgwidth)
*100
;// 整體高度 = 高度 + 內容高度
itemdata.height = imgheight +
this
.contentheight;
itemdata.src =
this
.list[i]
;// 將每一項都push到乙個列表中
this
.wate***lllist.
push
(itemdata)
;// 進行瀑布流布局
this
.wate***llflowlayout
(itemdata);}
;}},
// 瀑布流布局
wate***llflowlayout
(itemdata)
,/**
* 找到最短的列並返回索引
* @returns 索引
*/getshortestcol()
,},}
;<
/script>
移動端頁面的適配
一 關於viewport設定 二 關於不同裝置rem大小的計算，以及動態設定畫素縮放比 function setsize 三 koala將less轉義為css的運用 設計稿寬度為 750px,與iphone6為整倍數關係，故選iphone6為除錯裝置。選擇除錯裝置時，最好選擇與設計稿寬度成整倍數的裝...
Vue實現移動端頁面切換效果
在子頁面把整個頁面做絕對定位，覆蓋整個螢幕，子父頁面將 router view 用 transition 套起來，並加上過渡動畫就可以啦。效果 有乙個問題需要注意一下，我們知道，在應用transform屬性的時候，fixed定位會變成absolute。這裡，頁面轉換的時候，就變成了相對transla...
移動端除錯html頁面的方法
weinre這種方法。2.然後npm命令 npm install g weinre 3.執行wernre 在瀏覽器輸入上面的 localhost 8081 4.你會看到這樣的乙個介面 複製紅線框裡面的一段 內容，插入到你要除錯的html頁面中。5.接下來找到你weinre的安裝目錄，如 新建乙個 w...