vue项目中使用better-scroll实现侧边导航与列表的联动

第一步：安装与实例化，实现普通滑动

中文文档 https://better-scroll.github.io/docs/zh-CN/

1. 安装插件核心

yarn add @better-scroll/core

2. 在组件中引入插件

import BScroll from '@better-scroll/core'

3. 创建容器标签
   - 父元素中只能有一个子元素且高度小于子元素高度
   - 父元素设置overflow:hidden

//左侧分类导航(asideArr为分类类名数组)
<aside class="aside">
	<van-sidebar v-model="activeKey"> //activeKey为激活样式的索引
		<van-sidebar-item v-for="(v, i) in asideArr" :key="i" :title="v"/>
	</van-sidebar>
</aside>
//右侧数据列表（假设每个分类有多个项）
<main class="main">
	<ul>
		<li v-for="...">
			<h1>每个分类的类名</h1>
			<van-card v-for="...">每个分类下的具体项</van-card>
		</li>
	</ul>
</main>

4. data中定义better-scroll的空对象，初始为null

data() {
	return {
		bs1: null,//左侧滚动
		bs2: null,//右侧滚动
	}
}

5. 实例化BScroll，实现更好的滑动
   - 数据渲染后子元素就有了高度（在created里发送请求获取数据）
   - created里操作节点需要使用定时器或 $nextTick 回调函数

this.$nextTick(() => {
	this.bs1 = new BScroll('.aside', {
		probeType: 3,
		click: true
	})
	this.bs1 = new BScroll('.main', {
		probeType: 3,
		click: true
	})
})

第二步：点击左侧导航，实现右侧列表联动

1. 导航分类项遍历的时候绑定点击事件

<van-sidebar-item v-for="(v, i) in asideArr" :key="i" :title="v" @click="clickCate(i)"/>

2. 右侧列表遍历时给h1类名标签添加唯一id（拼接索引）

<h1 :id="'title'+ i">每个分类的类名</h1>

3. 点击事件里使用scrollToElement方法实现联动

methods: {
	clickCate(i) {
		//根据点击左侧分类对应的索引，找到右侧对应分类的标签
		this.bs2.scrollToElement('#title' + i, 500) //500是滑动时间(毫秒)
	}
}

第三步：滑动右侧列表，实现左侧导航联动

1. 左侧导航分类遍历的时给每一项添加唯一id（拼接索引）

<van-sidebar-item v-for="(v, i) in asideArr" :key="i" :title="v" :id="'cate'+i" @click="clickCate(i)"/>

2. 获取右侧列表每个分类标签的偏移高度

//以索引遍历
let arr = this.asideArr.map((v, i) => {
	return document.querySelector('#title' + i).offsetTop - document.querySelector('#title0').offsetTop
})

3. 右侧列表绑定scroll事件，获取y轴的滚动坐标，判断y值的范围，实现左侧联动

// 获取滚动y坐标 
this.bs2.on('scroll', position => {
	let y = Math.abs(position.y) //取绝对值
	//判断y的数值范围
	for (let i = 0; i <= arr.length - 2; i++) {
		if (y >= arr[i] && y < arr[i + 1]) {
			// 控制左侧activeKey的值
			this.activeKey = i
			// 左侧滚动到对应位置
			this.bs1.scrollToElement('#cate' + i, 500)
		} else if (y >= arr[arr.length - 1]) {
			// 最后一个索引位置时
			let endIndex = arr.length - 1
			this.activeKey = endIndex
			this.bs1.scrollToElement('#cate' + endIndex, 500)
		}
	}
})