vue项目中使用better-scroll实现侧边导航与列表的联动
假设导航列表及数据列表都是发送axios请求后渲染出来的(省略vant-ui步骤)
第一步:安装与实例化,实现普通滑动
中文文档 https://better-scroll.github.io/docs/zh-CN/
- 安装插件核心
yarn add @better-scroll/core
- 在组件中引入插件
import BScroll from '@better-scroll/core'
- 创建容器标签
- 父元素中只能有一个子元素且高度小于子元素高度
- 父元素设置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