uniapp如何用vue3实现下拉列表二级标题可滑动选择

要实现下拉列表二级标题可滑动选择，可以使用uni-ui提供的Picker组件。

首先，在需要使用的页面中引入Picker组件：

<template>
  <view>
    <picker :show="showPicker" :picker-data="pickerData" @cancel="cancelPicker" @confirm="confirmPicker"></picker>
  </view>
</template>

<script>
  import { Picker } from 'uni-ui';

  export default {
    components: {
      Picker
    },
    data() {
      return {
        showPicker: false,
        pickerData: [
          {
            label: '标题1',
            value: 'title1',
            children: [
              { label: '选项1', value: 'option1' },
              { label: '选项2', value: 'option2' },
              { label: '选项3', value: 'option3' }
            ]
          },
          {
            label: '标题2',
            value: 'title2',
            children: [
              { label: '选项4', value: 'option4' },
              { label: '选项5', value: 'option5' },
              { label: '选项6', value: 'option6' }
            ]
          }
        ]
      }
    },
    methods: {
      openPicker() {
        this.showPicker = true;
      },
      cancelPicker() {
        this.showPicker = false;
      },
      confirmPicker(value) {
        console.log(value);
        this.showPicker = false;
      }
    }
  }
</script>

在上面的代码中，我们定义了一个Picker组件，并传入了两个props：

- `show`：是否显示Picker组件，可以通过设置该值控制组件的显示和隐藏。
- `picker-data`：Picker组件的数据源，该数据源是一个数组，每个元素都包含一个`label`和`value`属性，以及一个`children`数组，用于表示该元素下的子选项。

除了props之外，我们还定义了三个方法：

- `openPicker`：用于打开Picker组件。
- `cancelPicker`：用于取消Picker组件的选择。
- `confirmPicker`：用于确认选择，并将选择的值通过`value`参数返回。

最后，我们在template中使用`v-for`循环生成Picker组件中的选项，用于实现二级标题可滑动选择的效果。