使用vue如何實(shí)現(xiàn)的購(gòu)物商城

效果圖如下所示：

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

點(diǎn)擊下載安卓apk安裝包

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

項(xiàng)目主架構(gòu)

使用的庫(kù)

設(shè)計(jì)布局:

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

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

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

數(shù)據(jù)請(qǐng)求：

邏輯交互：

優(yōu)化方案:

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

媲美原生的頁(yè)面前進(jìn)和后退的動(dòng)畫實(shí)現(xiàn):

指定transition:name

在data中聲明默認(rèn)的進(jìn)出動(dòng)畫

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

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

然后進(jìn)行判斷

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

下一頁(yè)動(dòng)畫

.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;
}

返回上一頁(yè)動(dòng)畫

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

購(gòu)物車左滑刪除

v-touch

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

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

左右滑方法

滑動(dòng)的時(shí)候觸發(fā)select樣式，進(jìn)行綁定

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

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

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

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

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

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

相關(guān)文章：

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

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

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

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