實現目的兩個:
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方式傳...