# 分类页的双列联动的设计 ## 前言 这种交互作为商品的分类展示页的时候比较常见，一言概之，就是：左边点，右边滚；右边滚，左边点。这种交互比较基础也相对简单，我们来看一下应该如何做。 ## DOM结构 作为演示就在这里随便写点，联动结构对节点的布局结构要求并不大，大致分两列就可以了，我们主要用js去设计交互逻辑。 ~~~jsx <template> <div class="container"> <div class="left-list"> <div v-for="(item, idx) in leftTitleList" :key="idx" @click.stop="onLeftTitleClick(item, idx)" :class="['left-item', { activated: currentIndex == idx }]">{{ item }}</div> </div> <div class="right-list"> <scroll-view scroll-y style="height: 90vh"> <div class="right-item" v-for="(item, idx) in List" :key="item.id" :ref="`category-${idx}`" :id="`category-${idx}`"> <div class="category-title">{{ item.name }}</div> <div class="category-content"></div> </div> </scroll-view> </div> </div> </template> <script> const List = [ { id: 1, name: '热门推荐', data: [{}], }, { id: 2, name: '线上购物', data: [{}], }, { id: 3, name: '影音音乐', data: [{}], }, { id: 4, name: '话费充值', data: [{}], }, { id: 5, name: '外卖零食', data: [{}], }, { id: 6, name: '其他', data: [{}], }, ] export default { name: '', components: {}, data() { return { List, currentIndex: 0 } }, methods: { onLeftTitleClick(item,index) { this.currentIndex = index; } }, computed: { leftTitleList() { return this.List.map((item) => item.name) }, }, mounted() { }, } </script> <style> page { background: #f4f4f4; } </style> <style lang="scss" scoped> .nav-title { font-size: 36rpx; font-weight: 600; color: #000000; } .container { display: flex; } .left-list { display: flex; flex-direction: column; flex: 1; background: #fff; .left-item { padding: 37rpx 0; display: flex; justify-content: center; align-items: center; &.activated { background: #f4f4f4; } } } .right-list { flex: 3; margin-left: 20rpx; margin-right: 20rpx; .right-item { .category-title { font-size: 28rpx; font-weight: 400; color: #333333; padding: 44rpx 0; display: flex; align-items: center; } .category-content { background: #fff; height: 900rpx; border-radius: 8rpx; } } } </style> ~~~ 总之大概这样就可以了，现在我们来一步一步的设计需求所要求的交互。 ## 左边点，右边滚 最直观的思路就是记录一开始记录右边区域的每一个元素的y轴偏移量，然后点击左边列表的时候相应的控制右边滚动条的高度。 所幸我们用的是uniapp，scroll-view