# 分類頁的雙列聯動的設計 ## 前言 這種交互作為商品的分類展示頁的時候比較常見，一言概之，就是：左邊點，右邊滾；右邊滾，左邊點。這種交互比較基礎也相對簡單，我們來看一下應該如何做。 ## 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