> ### 效果如图  > ### 安装并引入 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 时拆分为多个组件