uni-app 左侧tab跟list锚点联动

在uni-app中实现左侧tab与list锚点联动，可以通过监听tab切换事件，动态滚动到对应的列表位置。以下是一个基本的实现思路及相关代码示例。

1. 页面布局

假设我们有三个tab，每个tab对应一个列表项。页面布局可以如下：

<template>
  <view class="container">
    <!-- 左侧tab -->
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index" @click="switchTab(index)" :class="{active: activeTab === index}">
        {{ tab.name }}
      </view>
    </view>

    <!-- 右侧列表 -->
    <scroll-view scroll-y="true" :scroll-into-view="toView">
      <view v-for="(item, index) in list" :id="'item-' + index" class="list-item">
        {{ item.content }}
      </view>
    </scroll-view>
  </view>
</template>

2. 数据与方法

在<script>部分，定义tabs和list数据，以及切换tab的方法：

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { name: 'Tab 1' },
        { name: 'Tab 2' },
        { name: 'Tab 3' }
      ],
      list: [
        { content: 'Item 1' },
        { content: 'Item 2' },
        { content: 'Item 3' }
      ],
      toView: ''
    };
  },
  methods: {
    switchTab(index) {
      this.activeTab = index;
      this.toView = 'item-' + index;
    }
  }
};
</script>

3. 样式

在<style>部分，添加一些基本的样式：

<style>
.container {
  display: flex;
}

.tabs {
  width: 20%;
}

.tabs view {
  padding: 10px;
  cursor: pointer;
}

.tabs .active {
  background-color: #f0f0f0;
}

.list-item {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

scroll-view {
  width: 80%;
  height: 100vh;
  overflow: hidden;
}
</style>

4. 注意事项

• 确保每个列表项有一个唯一的ID，这里通过v-for="(item, index)"和:id="'item-' + index"实现。
• 使用scroll-into-view属性来实现滚动到指定视图，这里通过绑定toView变量实现。
• 根据实际需求，可以进一步优化和美化页面布局和样式。

通过上述代码，可以在uni-app中实现左侧tab与右侧列表锚点的联动效果。