> ### 效果如圖  > ### 安裝并引入 better-scroll ```js npm i better-scroll -s import BScroll from 'better-scroll' mounted(){ this.$nextTick(() => { this.scroll = new BScroll(this.$refs.wrapper, { click: true, // 允許手機端的點擊事件 // taps: true, }); }) } ``` > ### 左側 menu 點擊與右側商品列傳參 這里將點擊的左側 menu 內容傳給右側組件 ```html <goods-list :goods="goods" :turnGood="turnGood"></goods-list> ``` ```js data(){ return { turnGood: '', } } methods:{ turn(index) { var turnGood = this.$refs.name[index].innerText; // 獲取點擊對象的內容 this.turnGood = turnGood } } ``` > ### 右側 商品列 獲取通過左側傳遞的數據跳轉 這里右側通過監聽左側傳遞的數據，并通過 this.scroll.scrollToElement 跳轉 ``` props:{ goods: { type: [Object, Array] }, turnGood: [String] }, data(){ return { } }, watch:{ turnGood(n, o) { var element = this.$refs[n][0]; // 通過點擊對象的內容找到跳轉對象 this.scroll.scrollToElement(element, 300); } } ``` >### 注意點 1. 在手機端實現，需要設置 click 參數為 true 2. 實現多個 better-scroll 時拆分為多個組件