效果圖如下所示：

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

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

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

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

使用的庫

• vue-cli (vue+webpack腳手架)
• vue-router(路由跳轉(zhuǎn))
• vuex(狀態(tài)管理)
• axios(數(shù)據(jù)請求)
• mock.js(模擬后臺數(shù)據(jù))
• vue-touch(手勢判斷)
• fastclick(解決移動端瀏覽器 300 毫秒點(diǎn)擊延遲問題)
• vue-lazyload(圖片懶加載)
• swiper(輪播)
  

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

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

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

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

• HTML5
• CSS3
• Less
• rem(阿里用的那套rem算法)
• Flex(彈性布局)
• vue-touch(用于實(shí)現(xiàn)購物車左滑刪除功能) *動畫（vue原生transition實(shí)現(xiàn)原生app的效果）

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

• Mock(模擬后臺數(shù)據(jù))
• Axios(請求數(shù)據(jù))

邏輯交互：

• vue(數(shù)據(jù)渲染,各個(gè)組件間的數(shù)值傳遞)
• vue-router(組件間的路由跳轉(zhuǎn))
• vuex(全局狀態(tài)的管理)

優(yōu)化方案:

• 騰訊智圖(壓縮圖片，減少圖片的體積)
• vue-lazyload(圖片懶加載，緩解加載數(shù)據(jù),提高網(wǎng)頁性能)
• fastclick(解決移動端300ms延遲，提高頁面交互流暢度)
• vue-rouer(路由懶加載,分離app的js為多個(gè)js文件，到對應(yīng)的頁面再執(zhí)行對應(yīng)的js)
• webpack(config/index.js文件內(nèi)的productionSourceMap改為false,這樣打包出來的文件可以沒有.map結(jié)尾的js文件，且文件體積減少至少一半)

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

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

指定transition:name

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

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

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

然后進(jìn)行判斷

最后將當(dāng)前的組件名字傳給vuex,實(shí)現(xiàn)不同的組件進(jì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;

左右滑方法

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

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

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

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

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

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

總結(jié)

以上所述是小編給大家介紹的基于Vue、Vuex、Vue-router實(shí)現(xiàn)的購物商城(原生切換動畫)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論