vue实现城市左右联动

 我们先来看一下整体布局效果:

city

 首先，我们想要实现城市左右布局可以滚动需要下载一个插件 betterScroll

然后引入插件，如下所示：

npm i better-scroll
import BScroll from 'better-scroll'

initScroll () {
      this.$nextTick(() => {
        if (!this.Scroll) {
          this.Scroll = new BScroll(this.$refs.body, {
            click: true, // 配置允许点击事件
            scrollY: true, // 可以开启纵向滚动
            probeType: 3, // 开启滚动监听
            bounce: false // 关闭弹性效果
          })
          //Scroll这个对象监听事件，实时获取位置pos.y
          this.Scroll.on('scroll', (pos) => {
            // console.log(pos);
            this.scrollY = Math.abs(Math.round(pos.y))
          })
        } else {
          // 重新计算 better-scroll，当 页面大小发生变化的时候务必要调用确保滚动的效果正常
          this.Scroll.refresh() 
        }
      })
    },

重点：

getCity () {
      var that=this
      axios.get('/city.json').then(function (res){
        that.cityList=res.data.data.cities
        that.$nextTick(()=>{
          that.initScroll()
          that.calculateHeight()
        })
      })
    },

这里的代码一定要在获取数据里面写nextTick（）回调里面写代码，因为需要等待数据加载再去初始化scroll和获取右边每一个盒子的高度。

下面我们说一说高度如何获取

calculateHeight () {
      let flagList = this.$refs.body.getElementsByClassName('flag')
      console.log(flagList);
      //每个盒子的