uniapp+vue3如何实现下拉选择的二级联动弹窗功能

在uniapp+vue3项目中，如何实现一个下拉选择的二级联动弹窗？比如第一个下拉选择省份后，第二个下拉自动加载对应的城市列表。需要支持弹窗展示形式，且数据能动态绑定。请问具体的实现思路和代码示例是怎样的？最好能兼顾性能和用户体验。

2 回复

使用uni-app + Vue3实现二级联动弹窗：

  1. 使用<picker>组件或自定义弹窗
  2. 定义两个数组：一级选项和对应的二级选项
  3. 使用ref定义响应式数据
  4. 监听一级选择变化，动态更新二级选项
  5. 使用v-model绑定选择结果

示例代码：

const selected1 = ref('')
const selected2 = ref('')
const options2 = ref([])

const onFirstChange = (val) => {
  selected2.value = ''
  options2.value = secondOptions[val] || []
}

在 UniApp + Vue3 中实现下拉选择的二级联动弹窗功能，可以通过以下步骤完成：

1. 数据结构设计

使用嵌套数组或对象存储选项数据：

const options = [
  {
    label: '选项1',
    value: '1',
    children: [
      { label: '子选项1-1', value: '1-1' },
      { label: '子选项1-2', value: '1-2' }
    ]
  },
  {
    label: '选项2',
    value: '2',
    children: [
      { label: '子选项2-1', value: '2-1' }
    ]
  }
]

2. 组件实现

使用 uni-popup 和 picker-view 组件：

<template>
  <view>
    <!-- 触发按钮 -->
    <button @click="showPopup">选择分类</button>
    
    <!-- 弹窗 -->
    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <picker-view 
          :value="pickerValue" 
          @change="onPickerChange"
          indicator-style="height: 50px"
        >
          <!-- 第一级 -->
          <picker-view-column>
            <view v-for="item in options" :key="item.value" class="picker-item">
              {{ item.label }}
            </view>
          </picker-view-column>
          
          <!-- 第二级 -->
          <picker-view-column>
            <view 
              v-for="child in currentChildren" 
              :key="child.value" 
              class="picker-item"
            >
              {{ child.label }}
            </view>
          </picker-view-column>
        </picker-view>
        
        <view class="popup-buttons">
          <button @click="cancel">取消</button>
          <button @click="confirm">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const popup = ref()
const pickerValue = ref([0, 0])
const options = ref([...]) // 你的选项数据

// 计算当前二级选项
const currentChildren = computed(() => {
  const firstIndex = pickerValue.value[0]
  return options.value[firstIndex]?.children || []
})

// 显示弹窗
const showPopup = () => {
  popup.value.open()
}

// 选择器变化
const onPickerChange = (e) => {
  pickerValue.value = e.detail.value
}

// 取消选择
const cancel = () => {
  popup.value.close()
}

// 确认选择
const confirm = () => {
  const firstIndex = pickerValue.value[0]
  const secondIndex = pickerValue.value[1]
  const selected = {
    first: options.value[firstIndex],
    second: currentChildren.value[secondIndex]
  }
  console.log('选中结果:', selected)
  popup.value.close()
}
</script>

<style scoped>
.popup-content {
  background: #fff;
  padding: 20rpx;
}

.picker-item {
  line-height: 50px;
  text-align: center;
}

.popup-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
</style>

3. 关键点说明

  • 使用 picker-view 实现两级联动的滚动选择器
  • 通过 computed 属性动态计算二级选项
  • 使用 uni-popup 实现底部弹窗效果
  • 通过 pickerValue 数组维护两级选择的索引

4. 优化建议

  • 添加默认值支持
  • 增加数据验证和空状态处理
  • 可以封装成可复用组件
  • 添加加载状态和错误处理

记得先安装 uni-popup 组件：

npm install @dcloudio/uni-ui

在 pages.json 中配置：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }
}
回到顶部