vue2.0 better-scroll左右联动

在做移动端商城或者其他页面的时候，经常会遇到左右联动的效果，今天我们就使用vue2.0和better-scroll这个插件一起实现左右联动效果。

首先最简单写法点击左边切换右边内容

就是给右边的两个盒子加上一个div,然后ref="right_scroll" 获取this.$refs.right_scroll
点击左边切换(简单写法)
   leftFn(ind){
   
      this.scrollIndex=ind;
     this.rightScroll.scrollToElement(this.$refs.right_scroll[ind],1000)
   },

注意事项

• 左边一级分类和右边二级分类形成联动
• 当滑动右侧分类列表时, 更新左侧分类选中
• 点击左侧一级分类项时, 右侧列表滑动到对应位置
• 在vue脚手架的时候，引入第三方插件better-scroll，如果想了解的话，可以去看看它的中午文档说明，
• npm install better-scroll --save直接安装到自己项目当中，并引入

页面结构

<div class="search">
    <!-- 搜索导航 -->
    <SearchNav></SearchNav>
    <div class="shop">
      <!-- 左边 -->
      <div class="menu-wrapper">
        <ul>
          <!-- current -->
          <li
            class="menu-item"
            v-for="(goods,index) in searchgoods"
            :key="index"
            :class="{current: index === currentIndex}"
            @click="clickList(index)"
            ref="menuList"
            >
            <span>{
   {
   goods.name}}</span>
          </li>
        </ul>
      </div>
      <!-- 右边 -->
      <div class="shop-wrapper">
        <ul ref="itemList">
          <li class="shops-li" v-for="(goods, index1) in searchgoods" :key="index1">
            <div class="shops-title">
              <h4>{
   {
   goods.name}}</h4>
              <a href="">查看更多 > </a>
            </div>
            <ul class="phone-type" v-if="goods.tag === 'phone'">
              <li v-for="(phone,index) in goods.category" :key="index">
                <img :src="phone.icon" alt="">
              </li>
            </ul>
            <ul class="shops-items">
              <li v-for="(item, index2) in goods.items" :key="index2">
                <img :src="item.icon" alt="">
                <span>{
   {
   item.title}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>　

• 想对应的css 样式

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/mixins.styl"
  .search
    width 100%
    height 100%