vue 微信公众号 左右两部分各自滚动，并且左右联动展示

最近做的项目有一个需求是公众号页面左右两侧都可以进行滚动，像这样的页面

 这个的实现技术还是由better-scroll来实现，思路是：

1、先添加一个大的div标签，然后大的div标签下面放置左右两个div标签；

2、左右两个div标签分别添加ref属性，可以让左右两边都实现滚动；（让左右两边隔开，可以采用flex布局）

3、data中定义两个滚动变量；

4、给大的div设置滚动高度，便可以实现滚动。

步骤如下：

1、引入better-scroll

import BScroll from 'better-scroll'

2、定义两个滚动变量

data () {
    return {
      moreLeftScroll: null,
      moreRightScroll: null
    }
  },

3、初始化方法

mounted () {
    this.initLeft()
    this.initRight()
  },

methods: {
    initLeft () {
      this.$nextTick(() => {
        this.moreLeftScroll = new BScroll(this.$refs.more_second_left, {
          click: true
        })
      })
    },
    initRight () {
      this.$nextTick(() => {
        this.moreRightScroll = new BScroll(this.$refs.more_second_right, {
          click: true
        })
      })
    },
}

4、大的div设置高度以及滚动高度

.more_second {
    padding-top: 18px;
    margin: 5px 15px 5px;
    height: calc(100% - 55px);
    overflow: hidden;
}

这样页面就可以实现左右都滚动了

接下来实现的是，左右联动展示，思路是：

右侧的内容放置在不同的div下，当点击左侧按钮时，获取左侧的index，右侧采用排他思想，先让所有的div都不显示，然后采用左侧按钮index索引，让右侧同样索引的div显示，代码就展示script中的方法，当点击左侧按钮时，发生的点击事件

 getEvalType (val) { // val表示左侧点击按钮的index
      const items = document.querySelectorAll('.more_second_left_item') // 获取左侧所有按钮
      const rights = document.querySelectorAll('.more_second_right_one') // 获取右侧所有内容
      // console.log(rights)
      if (val === 0) { // 这里展示的是默认全部div内容
        for (let i = 0; i < items.length; i++) {
          items[i].className = 'more_second_left_item'
          rights[i].style.display = ''
        }
      } else {
        for (let i = 0; i < items.length; i++) {
          // console.log(i)
          items[i].className = 'more_second_left_item' // 除了点击的按钮，其他按钮没有css变化
          rights[i].style.display = 'none'
        }
      }
      items[val].className = 'more_second_left_item active' // 添加active属性，是设置了点击按钮状态的css变化
      rights[val].style.display = ''
    },

以上就是左右联动展示的js代码

当然除了左右联动展示，还可以左右联动滚动，这个的思路就是

 1 获取被点击的标题身上的索引 ；

2 给右侧data中的currentIndex赋值就可以了 ；

3 根据不同的索引来渲染右侧的商品内容；

4、重新设置 右侧内容的scroll-view标签的距离顶部的距离为0。

这个当前并未实现，所以就不给分享啦~

今天的分享就是这个，有哪里理解的不合适，欢迎留言沟通~