基于Vue、Vuex、Vue-router實(shí)現(xiàn)的購(gòu)物商城(原生切換動(dòng)畫(huà))效果

效果圖如下所示：

十余年的雷山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整雷山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“雷山網(wǎng)站設(shè)計(jì)”,“雷山網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

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

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

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

使用的庫(kù)

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

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

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

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

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

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

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

• Mock(模擬后臺(tái)數(shù)據(jù))
• Axios(請(qǐng)求數(shù)據(jù))

邏輯交互：

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

優(yōu)化方案:

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

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

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

指定transition:name

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

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

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

然后進(jìn)行判斷

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

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

.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)畫(huà)

.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)物車(chē)左滑刪除

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)物車(chē)的列表，樣式會(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)畫(huà)樣式的判斷

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

總結(jié)

以上所述是小編給大家介紹的基于Vue、Vuex、Vue-router實(shí)現(xiàn)的購(gòu)物商城(原生切換動(dòng)畫(huà))，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

本文名稱(chēng)：基于Vue、Vuex、Vue-router實(shí)現(xiàn)的購(gòu)物商城(原生切換動(dòng)畫(huà))效果
文章起源：http://muchs.cn/article8/ippoip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、App設(shè)計(jì)、云服務(wù)器、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)