摘要:的組件化功能可謂是它的一大亮點,通過將頁面上某一組件的代碼放入一個的文件中進行管理可以大大提高代碼的維護性。項目中未做移動端適配,在不同屏幕手機上打開,可能用戶體驗會差些
一、項目展示:
注意:如果gif動態圖看不了,麻煩大家點擊github美團項目中mt-app/src/assets/美團.gif便可以觀看!
本項目很適合vue初學者,如果業務邏輯看不懂,很歡迎一起討論!
源碼地址:mt-app,歡迎 star 和 fork
如果對你有些許幫助,不妨點贊、關注我一下啊
二、項目涉及到技術棧:vue全家桶:Vue、Vue-router、Vue-cli等
組件化:單Vue文件
模塊化:ES6 Module
第三方模塊:better-scroll axios等
基礎開發環境和包管理:Node、npm
構建工具:webpack
編輯器:webstrom
三、項目主要功能一言而蔽之:一款集點菜、用戶評價和商家信息為一體的移動端點餐APP
1.點餐頁面
點選商品后自動添加到購物車,并計算好總價,在商品列表、購物車列表和商品詳情頁都可以隨意增減數目,此外左側商品分類和右側的商品相互關聯,通過better-scroll插件滑動商品列表時,相應的商品分類也會跟著跳轉。
2.用戶評價頁面
主要包括一個TAB欄,包括三部分:全部、有圖和評價三個模塊
3.商家信息頁面
主要介紹一些商家基本信息,可以通過better-scroll插件,進行左右滑動圖片
該項目業務邏輯主要集中在點餐模塊,而點餐模塊中難點便是如何實現商品列表滑動,以及右側商品分類和左側商品列表如何聯動?
首先要實現商品列表的滑動,就需要用到一個better-scroll插件,better-scroll 是一款重點解決移動端(已支持 PC)各種滾動場景需求的插件。
安裝better-scroll npm install better-scroll --save
在Good.vue文件中script引入import BScroll from "better-scroll"
這些準備工作做好后,實現左右兩邊列表聯動,總結起來有以下四個步驟:
1. 計算商品分類的區間高度
//template部分
{{item.name}}
- ......
//JS部分 methods:{ calculateHeight() { // 計算分類的區間總高度(包括專場和所有具體分類的總高) let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook") let height = 0 this.listHeight.push(height) for (let i = 0; i < foodlist.length; i++) { let item = foodlist[i] height += item.clientHeight // 累加 this.listHeight.push(height) } console.log(this.listHeight)//[0, 43, 1231, 2401, 3589, 4451, 6121, 7656, 8497, 9344, 10080] }, initScroll() { this.menuScroll = new BScroll(this.$refs.menuScroll, { //實例化 click: true //點擊事件才能生效 }) this.foodScroll = new BScroll(this.$refs.foodScroll, { probeType: 3, click: true }) }, created() { fetch("/api/goods") .then(res => res.json()) .then(response => { if (response.code == 0) { this.container = response.data.container_operation_source this.goods = response.data.food_spu_tags this.poiInfo = response.data.poi_info this.$nextTick(() => { //在created中數據雖已初始化,但dom未生成,頁面還沒顯示,要使用回調函數,確保DOM已經更新 this.initScroll() // 執行滾動方法 this.calculateHeight() //調用計算分類區間高度的方法 }) } }) }2. 監聽滾動的位置
initScroll() { this.menuScroll = new BScroll(this.$refs.menuScroll) this.foodScroll = new BScroll(this.$refs.foodScroll, { probeType: 3,//在屏幕滑動的過程中實時派發 scroll 事件 click:true//點擊事件才能生效 }) //foodScroll監聽事件 this.foodScroll.on("scroll", (pos) => { this.scrollY = Math.abs(pos.y) console.log(this.scrollY) }) }3. 根據滾動位置確認下標,與左側對應
computed:{ currentIndex(){ for(let i = 0; i < this.listHeight.length; i++){ let height1 = this.listHeight[i] let height2 = this.listHeight[i+1] // 獲取商品區間的范圍 if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){ return i; // 是否在上述區間中 } } return 0 }文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99933.html
摘要:基于的版本和編寫的模仿原生應用的源碼地址歡迎項目演示地址建議直接添加到主屏幕端體驗差一些前言為什么做這個項目學習全家桶,很長一段時間在用。作者聲稱之后增強了對的支持,探究在中的支持情況。 vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript編寫的模仿原生應用的WebApp.源碼地址 歡迎star 項目演示地址 showImg(https://segment...
摘要:從現在開始,養成寫技術博客的習慣,或許可以在你的職業生涯發揮著不可忽略的作用。如果想了解更多優秀的前端資料,建議收藏下前端英文網站匯總這個網站,收錄了國外一些優質的博客及其視頻資料。 前言 寫文章是一個短期收益少,長期收益很大的一件事情,人們總是高估短期收益,低估長期收益。往往是很多人堅持不下來,特別是寫文章的初期,剛寫完文章沒有人閱讀會有一種挫敗感,影響了后期創作。 從某種意義上說,...
摘要:前端項目包含多個路由,涉及到文件有個,功能設計登錄,定位,瀏覽商品,加購物車,下訂單,支付支持微信和支付寶的掃碼支付和調起支付,評價,個人信息更改,是一個較為完整的項目。 關于 2019屆大三學生,前段時間一直想一個人單獨開發一個較為完整的項目,在眾多應用中,考慮之后選擇了美團外賣來模仿,這段時間就利用課余時間進行開發,前端用vue+vuex+vue-router+axios,因為需要...
閱讀 1171·2021-11-24 09:39
閱讀 2674·2021-09-28 09:35
閱讀 1070·2019-08-30 15:55
閱讀 1361·2019-08-30 15:44
閱讀 879·2019-08-29 17:00
閱讀 1969·2019-08-29 12:19
閱讀 3310·2019-08-28 18:28
閱讀 690·2019-08-28 18:10