国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue全家桶制作一個精致的美團項目

NeverSayNever / 1899人閱讀

摘要:的組件化功能可謂是它的一大亮點,通過將頁面上某一組件的代碼放入一個的文件中進行管理可以大大提高代碼的維護性。項目中未做移動端適配,在不同屏幕手機上打開,可能用戶體驗會差些

一、項目展示:

注意:如果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
    }
        
        

4. 通過下標實現點擊左側,滾動右側

 selectMenu(index) {
        let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
        let element = foodlist[index]
        this.foodScroll.scrollToElement(element, 250)
      }
五、項目總結

vue數據和視圖的分離,以數據驅動視圖,只關心數據變化,DOM操作被封裝,在實際開發過程中大大提高了效率。

Vue的組件化功能可謂是它的一大亮點,通過將頁面上某一組件的html、CSS、JS代碼放入一個.vue的文件中進行管理可以大大提高代碼的維護性。

項目中未做移動端適配,在不同屏幕手機上打開,可能用戶體驗會差些

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99933.html

相關文章

  • [在線+源碼]vue全家+Typescript開發一款習慣養成APP

    摘要:基于的版本和編寫的模仿原生應用的源碼地址歡迎項目演示地址建議直接添加到主屏幕端體驗差一些前言為什么做這個項目學習全家桶,很長一段時間在用。作者聲稱之后增強了對的支持,探究在中的支持情況。 vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript編寫的模仿原生應用的WebApp.源碼地址 歡迎star 項目演示地址 showImg(https://segment...

    fantix 評論0 收藏0
  • 寫技術博客那點事

    摘要:從現在開始,養成寫技術博客的習慣,或許可以在你的職業生涯發揮著不可忽略的作用。如果想了解更多優秀的前端資料,建議收藏下前端英文網站匯總這個網站,收錄了國外一些優質的博客及其視頻資料。 前言 寫文章是一個短期收益少,長期收益很大的一件事情,人們總是高估短期收益,低估長期收益。往往是很多人堅持不下來,特別是寫文章的初期,剛寫完文章沒有人閱讀會有一種挫敗感,影響了后期創作。 從某種意義上說,...

    ddongjian0000 評論0 收藏0
  • 寫技術博客那點事

    摘要:從現在開始,養成寫技術博客的習慣,或許可以在你的職業生涯發揮著不可忽略的作用。如果想了解更多優秀的前端資料,建議收藏下前端英文網站匯總這個網站,收錄了國外一些優質的博客及其視頻資料。 前言 寫文章是一個短期收益少,長期收益很大的一件事情,人們總是高估短期收益,低估長期收益。往往是很多人堅持不下來,特別是寫文章的初期,剛寫完文章沒有人閱讀會有一種挫敗感,影響了后期創作。 從某種意義上說,...

    NSFish 評論0 收藏0
  • 仿美團外賣的全棧項目(vue+node+mongodb)帶支付->大三求實習

    摘要:前端項目包含多個路由,涉及到文件有個,功能設計登錄,定位,瀏覽商品,加購物車,下訂單,支付支持微信和支付寶的掃碼支付和調起支付,評價,個人信息更改,是一個較為完整的項目。 關于 2019屆大三學生,前段時間一直想一個人單獨開發一個較為完整的項目,在眾多應用中,考慮之后選擇了美團外賣來模仿,這段時間就利用課余時間進行開發,前端用vue+vuex+vue-router+axios,因為需要...

    anRui 評論0 收藏0

發表評論

0條評論

NeverSayNever

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<