微信小程序定制搜索选择器组件

2023-12-31 18:04:35

引言

在微信小程序开发中，我们经常需要使用选择器组件来让用户从一组选项中进行选择。然而，当选项数量较多时，使用传统的picker组件可能会导致用户体验不佳。为了解决这个问题，我们可以创建一个自定义的可搜索选择器组件。

组件构建步骤

创建组件文件

首先，我们需要创建一个新的组件文件。在组件文件中，我们需要定义组件的模板、样式和逻辑。

// 组件文件
<template>
  <view class="picker-container">
    <input type="text" placeholder="搜索" @input="handleSearch" />
    <picker
      :value="selectedValue"
      :options="options"
      @change="handleChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [], // 选项数组
      selectedValue: '', // 选中值
      filteredOptions: [], // 过滤后的选项数组
    }
  },
  methods: {
    // 搜索选项
    handleSearch(e) {
      const keyword = e.detail.value
      this.filteredOptions = this.options.filter(option => option.label.includes(keyword))
    },
    // 选项改变时触发
    handleChange(e) {
      this.selectedValue = e.detail.value
    }
  }
}
</script>

<style>
.picker-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

picker {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

注册组件

在组件文件中，我们需要注册组件。

// app.js
import MyPicker from './components/MyPicker.vue'

Vue.component('my-picker', MyPicker)

使用组件

在页面文件中，我们可以使用组件。

<template>
  <my-picker options="options" value="selectedValue" @change="handleChange" />
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项一', value: 'value1' },
        { label: '选项二', value: 'value2' },
        // ...
      ],
      selectedValue: 'value1'
    }
  },
  methods: {
    handleChange(e) {
      this.selectedValue = e.detail.value
    }
  }
}
</script>