vue项目中使用better-scroll实现侧边导航与列表的联动_van-sidebar配合显示右侧内容

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

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

1. 安装插件核心

yarn add @better-scroll/core
1

2. 在组件中引入插件

import BScroll from '@better-scroll/core'
1

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
1
2
3
4
5
6
7
8
9
10
11