使用vue如何實現(xiàn)的購物商城

效果圖如下所示：

在線地址: github.czero.cn/fancy

點擊下載安卓apk安裝包

源碼地址: github.com/czero1995/f…

項目主架構(gòu)

使用的庫

設(shè)計布局:

將頁面的固定布局 position:fixed (比如Header,Footer)全部改為絕對布 局position:absolute ;

因為fixed會出現(xiàn)莫名其妙的兼容性問題，比如在ios11或ios8下會失效，輸入框軟鍵盤激活之后會把底部的固定定位彈出去，導(dǎo)致布局錯亂。

用absolute實現(xiàn)fixed細(xì)節(jié)可以參考這篇

數(shù)據(jù)請求：

邏輯交互：

優(yōu)化方案:

實現(xiàn)細(xì)節(jié)

媲美原生的頁面前進和后退的動畫實現(xiàn):

指定transition:name

在data中聲明默認(rèn)的進出動畫

在mounted()數(shù)據(jù)渲染初始化完成之后進行判斷

拿到vuex的狀態(tài)值

然后進行判斷

最后將當(dāng)前的組件名字傳給vuex,實現(xiàn)不同的組件進去就有不同的切換動畫。

下一頁動畫

.slide-go-enter-active,
.slide-go-leave-active {
 transition: all .5s;
 opacity: .8;
}
.slide-go-enter,
.slide-go-leave-to {
 transition: all .5s;
 transform: translate3d(100%, 0, 0);
 opacity: .8;
}

返回上一頁動畫

.slide-back-enter-active,
.slide-back-leave-active {
 transition: all .5s;
}
.slide-back-enter,
.slide-back-leave-to {
 transition: all .5s;
 transform: translate3d(-100%, 0, 0);
}

購物車左滑刪除

v-touch

在css中設(shè)置好刪除按鈕的偏移量

-webkit-transform: translate(-12%, 0);
-webkit-transition: all 0.3s linear;

左右滑方法

滑動的時候觸發(fā)select樣式，進行綁定

讓當(dāng)前的列表項==購物車的列表，樣式會被激活，出現(xiàn)左滑刪除

注意頁面的盒子使用盒子之后會和原生頁面出現(xiàn)沖突，導(dǎo)致滑動不流暢

因此，需要在main.js指定默認(rèn)的滑動方式為橫向滑動觸發(fā)

訂單頁面，點擊頂部導(dǎo)航和左右滑動進行組件的切換以及動畫樣式的判斷

也是使用的v-touch組件，實現(xiàn)方式和組件切換類似。 我給每個訂單狀態(tài)的組件一個不同的數(shù)字，根據(jù)這個數(shù)字，判斷組件是左滑動的動畫還是又滑動的動畫

上面是我整理給大家的，希望今后會對大家有幫助。

相關(guān)文章：

在vue中有幾種綁定變量的值以及防止其改變的方法（詳細(xì)教程）

在JavaScript中定義函數(shù)用 var foo = function () {} 和 function foo()區(qū)別介紹（詳細(xì)教程）

詳細(xì)講解使用Node.js寫一個簡單的命令行工具（詳細(xì)教程）

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com