Use uniapp to achieve multi-level linkage selector effects

Use Uniapp to achieve multi-level linkage selector effect

1. Introduction
Multi-level linkage selector is a common interactive effect that is used in many application scenarios can be seen in . In Uniapp, we can easily achieve this effect by using the components and APIs it provides. This article will introduce how to use Uniapp to implement multi-level linkage selectors and provide specific code examples.

2. Preparation work
Before starting the implementation, we need to prepare the following work:

1. Install the Uniapp development environment, including Node.js, HBuilderX, etc.;
2. Create a Uniapp project and choose a suitable template;
3. Understand the basic development knowledge of Uniapp, including components, page routing, etc.

3. Implementation steps

1. Create the data source of the selector
   The core of the multi-level linkage selector is the data source. We first need to create a set of data sources that meet the requirements. The data. Taking the three-level linkage selector as an example, we define an array. Each element of the array is an object. The object includes a display text and a child array. The child array is also composed of objects, and so on.

For example, we create a province and city data source:

const data = [
  {
    name: '北京市',
    children: [
      {
        name: '东城区',
        children: [
          { name: '东华门街道' },
          { name: '东四街道' }
        ]
      },
      {
        name: '西城区',
        children: [
          { name: '西单街道' },
          { name: '西直门街道' }
        ]
      }
    ]
  },
  {
    name: '上海市',
    children: [
      {
        name: '黄浦区',
        children: [
          { name: '外滩街道' },
          { name: '南京东路街道' }
        ]
      },
      {
        name: '徐汇区',
        children: [
          { name: '徐家汇街道' },
          { name: '田林街道' }
        ]
      }
    ]
  }
];

2. Implement the page structure and style
   In Uniapp, we can use the components it provides Page construction. First, create a page named index in the pages directory, and write the page structure and style in the index.vue file.

<template>
  <view class="container">
    <!-- 一级选择器 -->
    <picker mode="selector" :range="{{provinceList}}" bindchange="handleProvinceChange" :value="provinceIndex">
      <view class="picker-block">
        <text>请选择省份</text>
        <text>{{provinceName}}</text> <!-- 显示选择的省份 -->
      </view>
    </picker>

    <!-- 二级选择器 -->
    <picker mode="selector" :range="{{cityList}}" bindchange="handleCityChange" :value="cityIndex">
      <view class="picker-block">
        <text>请选择城市</text>
        <text>{{cityName}}</text> <!-- 显示选择的城市 -->
      </view>
    </picker>

    <!-- 三级选择器 -->
    <picker mode="selector" :range="{{districtList}}" bindchange="handleDistrictChange" :value="districtIndex">
      <view class="picker-block">
        <text>请选择区县</text>
        <text>{{districtName}}</text> <!-- 显示选择的区县 -->
      </view>
    </picker>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.picker-block {
  margin-bottom: 20px;
}
</style>

3. Implement event processing of the selector
   In Uniapp, we can use the bindchange event of the picker component to listen to the selector changes and execute corresponding logic.

Add the following code in the index.vue file:

<script>
export default {
  data() {
    return {
      provinceList: [],
      provinceIndex: 0,
      provinceName: "",
      cityList: [],
      cityIndex: 0,
      cityName: "",
      districtList: [],
      districtIndex: 0,
      districtName: ""
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // 初始化省份列表
      this.provinceList = data.map(item => item.name);

      // 初始化城市列表
      this.handleProvinceChange({ detail: { value: this.provinceIndex } });
    },
    handleProvinceChange(e) {
      const index = e.detail.value;
      this.provinceIndex = index;
      this.provinceName = this.provinceList[index];

      // 根据选择的省份，初始化城市列表
      const cityData = data[index].children;
      this.cityList = cityData.map(city => city.name);

      // 初始化区县列表
      this.handleCityChange({ detail: { value: this.cityIndex } });
    },
    handleCityChange(e) {
      const index = e.detail.value;
      this.cityIndex = index;
      this.cityName = this.cityList[index];

      // 根据选择的城市，初始化区县列表
      const districtData = data[this.provinceIndex].children[index].children;
      this.districtList = districtData.map(district => district.name);
      
      // 初始化选中的区县
      this.handleDistrictChange({ detail: { value: this.districtIndex } });
    },
    handleDistrictChange(e) {
      const index = e.detail.value;
      this.districtIndex = index;
      this.districtName = this.districtList[index];
    }
  }
};
</script>

4. Running and debugging
In HBuilderX, select the appropriate running environment, Can be previewed and debugged on the simulator or real device. If everything goes well, you can see the effect of the multi-level linkage selector.

5. Summary
This article introduces the method of using Uniapp to implement multi-level linkage selectors, including creating data sources, implementing page structure and styles, and processing selector events. Through these steps, we can easily achieve the effect of multi-level linkage selectors in Uniapp. I hope this article will be helpful to Uniapp development!

The above is the detailed content of Use uniapp to achieve multi-level linkage selector effects. For more information, please follow other related articles on the PHP Chinese website!