17 | 滚动选择器（二）：使用两种方式自定义实现省、市、区三级联动的选择器-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 17 | 滚动选择器（二）：使用两种方式自定义实现省、市、区三级联动的选择器

在微信小程序开发中，实现省、市、区三级联动的选择器是一个常见且实用的功能，尤其在涉及地址选择、物流配送等场景时尤为重要。本章将深入探讨两种主流方式来自定义实现这一功能：一种是通过微信小程序内置的`picker-view`组件结合数据绑定与事件处理实现；另一种则是利用`scroll-view`组件结合自定义逻辑和动画效果，打造更加灵活和个性化的选择器。

#### 一、使用`picker-view`组件实现

`picker-view`是微信小程序提供的一个强大的选择器组件，它支持多列选择，非常适合用于实现三级联动选择器。下面将详细介绍如何使用`picker-view`来实现省、市、区三级联动。

##### 1. 数据准备

首先，需要准备省、市、区的数据。这些数据通常以JSON格式存储，每个级别的数据都包含下一级的引用（如通过ID和名称的映射关系）。

```json
// 示例数据（简化版）
"provinces": [
    {"id": 1, "name": "广东省", "cities": [...]},
    {"id": 2, "name": "浙江省", "cities": [...]}
],
"cities": [
    {"id": 101, "provinceId": 1, "name": "广州市", "districts": [...]},
    {"id": 102, "provinceId": 1, "name": "深圳市", "districts": [...]}
],
"districts": [
    {"id": 1001, "cityId": 101, "name": "天河区"},
    {"id": 1002, "cityId": 101, "name": "越秀区"}
]
```

##### 2. 页面结构（WXML）

使用`picker-view`和`picker-view-column`组件构建选择器界面。

```xml
<view class="picker-container">
    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" range="{{range}}" bindchange="bindPickerChange">
        <picker-view-column>
            <view wx:for="{{provinces}}" wx:key="id" style="line-height: 50px;">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
            
            <view wx:for="{{currentCities}}" wx:key="id" style="line-height: 50px;">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
            
            <view wx:for="{{currentDistricts}}" wx:key="id" style="line-height: 50px;">{{item.name}}</view>
        </picker-view-column>
    </picker-view>
</view>
```

注意：这里的`currentCities`和`currentDistricts`是页面数据的一部分，需要根据用户的选择动态更新。

##### 3. 逻辑处理（JS）

- 在Page的data中定义初始值和监听函数。
- 在`bindPickerChange`函数中处理用户的选择，更新`currentCities`和`currentDistricts`。

```javascript
Page({
    data: {
        value: [0, 0, 0], // 初始选择值，对应省、市、区的索引
        provinces: [],
        cities: [],
        districts: [],
        currentCities: [],
        currentDistricts: []
    },
    onLoad: function() {
        // 假设这里通过API或其他方式加载了省市区数据
        this.setData({
            provinces: // 加载的省份数据
        });
        this.updateCities(0); // 初始加载第一个省份的城市
    },
    bindPickerChange: function(e) {
        const { range } = e.detail;
        this.setData({
            value: range
        });
        const provinceIndex = range[0];
        this.updateCities(provinceIndex);
        this.updateDistricts(range[1]);
    },
    updateCities: function(provinceIndex) {
        // 根据省份索引更新城市数据
    },
    updateDistricts: function(cityIndex) {
        // 根据城市索引更新区数据
    }
});
```

#### 二、使用`scroll-view`组件自定义实现

虽然`picker-view`提供了便捷的解决方案，但在某些场景下，开发者可能希望拥有更多的自定义空间，比如调整滚动条样式、添加动画效果等。这时，可以使用`scroll-view`组件来手动实现三级联动选择器。

##### 1. 页面结构（WXML）

使用`scroll-view`构建三个垂直滚动的列表，分别对应省、市、区。

```xml
<view class="scroll-picker">
    <scroll-view scroll-y="true" style="height: 100px;" bindscroll="handleScrollProvince">
        <view wx:for="{{provinces}}" wx:key="id" class="picker-item" style="height: 30px; line-height: 30px;">{{item.name}}</view>
    </scroll-view>
    <scroll-view scroll-y="true" style="height: 100px;" bindscroll="handleScrollCity">
        <view wx:for="{{currentCities}}" wx:key="id" class="picker-item" style="height: 30px; line-height: 30px;">{{item.name}}</view>
    </scroll-view>
    <scroll-view scroll-y="true" style="height: 100px;" bindscroll="handleScrollDistrict">
        <view wx:for="{{currentDistricts}}" wx:key="id" class="picker-item" style="height: 30px; line-height: 30px;">{{item.name}}</view>
    </scroll-view>
</view>
```

##### 2. 逻辑处理（JS）

- 监听每个`scroll-view`的滚动事件，根据滚动位置计算当前选中的项。
- 更新`currentCities`和`currentDistricts`以反映当前的选择。

```javascript
Page({
    data: {
        // ... 数据定义同上
        provinceScrollTop: 0, // 省份滚动条位置
        cityScrollTop: 0, // 城市滚动条位置
        districtScrollTop: 0 // 区滚动条位置
    },
    handleScrollProvince: function(e) {
        this.setData({
            provinceScrollTop: e.detail.scrollTop
        });
        // 根据scrollTop计算当前选择的省份索引，并更新城市和区的数据
    },
    handleScrollCity: function(e) {
        // 类似处理城市选择
    },
    handleScrollDistrict: function(e) {
        // 类似处理区选择
    }
});
```

**注意**：由于`scroll-view`不直接提供当前选中项的索引，因此需要通过计算滚动条的位置与每个选项的高度来确定当前选中的项。这通常涉及到一些数学计算和可能的性能优化。

#### 总结

通过`picker-view`组件和`scroll-view`组件，我们分别展示了两种实现微信小程序中省、市、区三级联动选择器的方法。`picker-view`提供了更简洁的API和较好的用户体验，适合大多数情况；而`scroll-view`则提供了更高的自定义空间，适合需要特殊效果或布局的场景。开发者可以根据实际需求选择合适的方法。

该分类下的相关小册推荐：

微信小程序与云开发(下)

微信小程序全栈开发实战(中)

微信小程序底层框架实现原理

微信小程序全栈开发实战(下)

微信小程序与云开发(上)

微信小程序与云开发(中)