uni-app点击筛选弹出二级筛选

在uni-app中实现点击筛选按钮弹出二级筛选功能，可以通过使用uni-ui库中的组件或者自定义组件来实现。以下是一个使用自定义组件和Vuex（用于状态管理）的示例代码，来展示如何实现这个功能。

1. 创建筛选组件

首先，我们创建一个名为FilterModal.vue的二级筛选组件。

<template>
  <view class="modal" v-if="visible">
    <view class="modal-overlay" @click="closeModal"></view>
    <view class="modal-content">
      <!-- 二级筛选内容 -->
      <view>
        <button @click="selectOption('Option 1')">Option 1</button>
        <button @click="selectOption('Option 2')">Option 2</button>
      </view>
      <button @click="closeModal">确定</button>
    </view>
  </view>
</template>

<script>
export default {
  props: ['visible'],
  methods: {
    closeModal() {
      this.$emit('update:visible', false);
    },
    selectOption(option) {
      // 处理选项选择逻辑
      console.log('Selected:', option);
      this.closeModal();
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
}
</style>

2. 在主页面中使用筛选组件

然后，我们在主页面中使用这个组件，并绑定点击事件来控制它的显示。

<template>
  <view>
    <button @click="showFilterModal = true">筛选</button>
    <FilterModal :visible.sync="showFilterModal" />
  </view>
</template>

<script>
import FilterModal from '@/components/FilterModal.vue';

export default {
  components: {
    FilterModal
  },
  data() {
    return {
      showFilterModal: false
    };
  }
}
</script>

3. 注意事项

• 在FilterModal.vue中，使用了.sync修饰符来简化父子组件间的双向绑定。
• 你可以根据需求在FilterModal组件中添加更多的筛选选项和逻辑。
• 样式部分可以根据实际需求进行调整，确保在不同屏幕尺寸上都有良好的显示效果。

这个示例代码展示了如何在uni-app中实现点击筛选按钮弹出二级筛选功能。通过自定义组件和Vuex（或简单的父子组件通信），可以灵活地实现复杂的交互逻辑。