實現目的兩個：
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類名的變化。
