餓了麼首頁實現左右兩欄聯動。

2022-06-10 19:45:10 字數 1467 閱讀 4260

實現目的兩個:

1   手指點選左邊選單欄,右邊食物欄會聯動到選單欄下面的內容。

2   手指滑動右邊食物欄,左邊選單欄會隨著右側的滾動而相應出現active樣式。

我自己用原生寫了好幾個,問題很多,有的卡頓,有的每次都從頭開始走,很煩人。知道我引用了外掛程式才算順暢。

外掛程式是better-scroll  npm一下,import一下開始操作。

先實現目的1;

目的1  很簡單

(1)在左側目標li繫結click事件。觸發函式move

(2)初始化兩個better-scorll物件,乙個food(右邊的),乙個menu(左邊的),別忘記給他們設定click:true。

在move函式裡執行 food.scrolltoelement(le,time)    這個方法簡直逆天:能food裡的目標元素el在time毫秒內滾動到最頂部。el可以通過move(index)來獲取;

此時點選右側,左側就可以聯動了。

實現目的2  比實現目的1較複雜:

(1)定義乙個陣列,記錄每個food中list的高度

(如果沒有border情況下,clientheight或者offsetheight都可以,有border請用offsetheight,但是style.height不可以,因為只有行間樣式style才能點到)

真實的寬度在data裡肯定獲取不到,因為涉及到dom建立,所以在created鉤子裡的nexttick()**函式裡獲取;(大家都知道created鉤子執行時dom 其實並未進行任何渲染,獲取不到                                    offsetheight)   

mounted**裡是無法直接通過this.$refs獲取到用ref命名的子元件的,只有nexttick才能訪問到,我也嘗試過在mounted裡獲取offsetheight,沒有獲取到。()

scroll事件實時監聽滾動位置,並且將位置賦給scrolly,scrolly發生變化引起了函式再次執行並返回index。

接下來就簡單了,新index的變化引起繫結class屬性的變化新增active類名的變化。

餓了麼註冊餓了團 餓了麼拼團商標

程式設計yi vgdbz客棧 www.cppcns.com 6月16日 訊息 企查查app顯示,餓了麼運營主體公司拉扎斯網路科技 上海 有程式設計客棧限公司於6月8日申請註冊餓了團商標。餓了麼申請的餓了團商程式設計客棧標國際分類包含35類 www.cppcns.com廣告銷售 43類 餐飲住宿等,目...

餓了麼專案 一

可以上傳已有的svg圖示,生成對應的css.引入生成的css,就可以用css呼叫相應的圖示 var apiroutes express.router apiroutes.get seller function req,res apiroutes.get goods function req,res ...

餓了麼nginx部署

不要雙擊nginx的安裝exe檔案,要用cmd start nginx server 複製 解決本地開發,呼叫介面時跨域問題 server location good 複製 nginx是乙個web伺服器,可以做負載均衡和反向 所有通過web訪問的頁面都需要乙個web伺服器,如果資源要通過web方式傳...