仿肯德基宅急送App Vue實戰

2021-09-27 06:49:26 字數 1090 閱讀 6031

首頁 商品頁 外賣頁

技術棧vue + webpack + vuex + axios

定義的元件

better-scroll

因為每個頁面都需要滑動,所以一開始就把scroll元件封裝好,之後使用的話引入一下就行了

複製**

slot 插槽是一塊模板,顯示不顯示,以及怎樣顯示由父元件來決定, 也就是把你想要滑動的區域插進去,剩下的內容都是官方文件定義好的,複製一遍就好了

固定頭部

頭部相對頁面是固定的,這裡我把頭部都封裝成了元件,在主頁面引入頭部,要滑動的部分放入上面定義好的scroll元件即可

側邊欄以及彈出框

起初我的想法是用router-link直接跳轉,然後發現這樣做頁面會自帶導航欄,於是我決定通過css動態繫結來實現它

.sidebar-con

.showbar

複製**

vuex狀態管理

const state =

const mutations =

}const actions = , status)

}const getters =

複製**

用mapgetter拿到物件,然後傳給computed屬性,物件可以直接使用

computed: ,

複製**

當需要顯示的時候使用dispatch將引數傳入 this.$store.dispatch(『setshowsidebar』, true)

整體**

複製**

外賣點餐

商品展示

需要注意的是vue傳遞原生事件使用$event

複製**

購物車複製**

操作按鈕

這個模組主要通過三個小模組實現,刪除按鈕,顯示數量塊,增加按鈕

複製**

非同步問題}

複製** 這裡迴圈巢狀,整個dom結構都是迴圈出來的,而better-scroll需要操作dom結構,要實現橫向滑動效果,難免會有非同步問題。 可是無論我使用.then或者$nexttick都無法掛載better-scroll,查閱了大量文件也無法解決,最後只能使用原生的overflow-x,若是有解決辦法,歡迎提出,感激不盡!

宅急送 專案

宅急送 專案第一天 環境搭建 宅急送 專案第二天 完整流程 宅急送 專案第三天 貨物收派標準 宅急送 專案第四天 取派員和區域管理 宅急送 專案第五天 區域 分割槽 定區 宅急送 專案第六天 定區管理 宅急送 專案第七天 取派業務模組 宅急送 專案第八天 jbpm工作流框架 宅急送 專案第九天 jb...

必勝宅急送Web app設計背後的思考

1相關廠商內容 相關贊助商 qcon全球軟體開發大會 北京站 2014,4月25 27日,誠邀蒞臨。除了實現產品功能概念外 有效性 另外的動機就是減少消費者從登入 到預覽下單的時間 效率 和讓消費者接受並喜歡使用宅急送 滿意度 有效性 效率和滿意度是評判產品可用性的標準,在以使用者為中心的產品設計中...

宅急送,送來了變了形的伺服器

我們拒收了伺服器,聯絡宅急送處理這件事。零刻資料聯絡了河北的宅急送,讓他們賠償,宅急送啟動了賠償程式,卻需要很多手續 伺服器發票 伺服器廠商的供貨清單 發貨與收貨方的一些證明 第三方提供的伺服器損壞情況評估等等,然後根據伺服器損壞情況考慮怎麼賠償,這樣不知要折騰到什麼時候!下午五點左右,我們又打了宅...