van-list 如何结合 van-swipe使用

van-list和van-swipe都是在Vue.js框架下的组件，它们可以结合使用来实现更好的用户体验。

van-list组件可以显示一组列表，而van-swipe组件可以支持左右滑动事件。通过将这两个组件结合使用，可以实现一个左右滑动切换不同列表项的功能。

具体实现方法如下：

1. 首先，在页面上引入van-list和van-swipe组件。

2. 在van-list组件中设置ref属性，以便在后面的代码中可以通过该属性访问到该组件。

3. 在van-swipe组件中使用@change事件监听滑动事件，当滑动时，可以通过当前滑动到的索引值，通过ref属性访问到van-list组件，从而切换到对应的列表项。

下面是示例代码：

<template>
  <van-swipe @change="handleSwipe">
    <van-swipe-item v-for="(item, index) in list" :key="index">
      <van-list ref="list">
        <van-list-item v-for="(subItem, subIndex) in item" :key="subIndex">
          {{ subItem }}
        </van-list-item>
      </van-list>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { Swipe, SwipeItem, List, ListItem } from 'vant';

export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [List.name]: List,
    [ListItem.name]: ListItem,
  },
  data() {
    return {
      list: [
        ['列表项1', '列表项2', '列表项3'],
        ['列表项4', '列表项5', '列表项6'],
        ['列表项7', '列表项8', '列表项9'],
      ],
    };
  },
  methods: {
    handleSwipe(index) {
      this.$refs.list[index].scrollIntoView();
    },
  },
};
</script>

在上面的代码中，van-list组件中的列表项是通过v-for指令动态生成的，这里只是用了一些简单的文本作为示例。

在handleSwipe方法中，使用$refs属性访问到van-list组件，再通过scrollIntoView方法将当前列表项滚动到可视区域内。

注意，要让van-swipe组件和van-list组件配合使用，需要确保它们的数据结构一致，即van-swipe的子组件中包含van-list组件，而van-list的子组件才是真正的列表项。