小程序开发心得（二）

实现地区三级联选

1.picker

这是小程序自带的一个组件，用来实现单选。现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。但是普通选择器无法满足两级甚至更多级的联选。所以需要用到picker-view。

2.picker-view

<picker-view-column>作为<picker-view>的子节点，每一列都相当于一个选择器，这就能够弥补picker只能实现一级选择的缺陷。具体实现地区的三级联选详见以下代码。

<!--picker.wxml-->
<picker-view class="picker-view" indicator-class='area-picker-column' style="width: 100%; height: 224px;" value="{{areaIndex}}" bindchange="bindAreaChange">
    <picker-view-column>
        <view wx:for="{{province}}" class="area-picker__item">{{item.name}}</view>
    </picker-view-column>
    <picker-view-column>
            <view wx:for="{{city}}" class="area-picker__item">{{item.name}}</view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{area}}" class="area-picker__item">{{item.name}}</view>
    </picker-view-column>
</picker-view>

//common.js统一放在common中，方便复用
//此处省略区域数据。
function bindChange (that,e) {
    var curCity = city[province[e.detail.value[0]].id];
    that.setData({
        'area_data.city': curCity
    });
    if(curCity.length < 2) {
        that.setData({
            'area_data.area': area[city[province[e.detail.value[0]].id][0].id],
        })
    } else {
        that.setData({
            'area_data.area': area[city[province[e.detail.value[0]].id][e.detail.value[1]].id],
        })
    }
    var form_city = that.data.area_data.province[e.detail.value[0]].name + ',' + that.data.area_data.city[e.detail.value[1]].name + ',' + that.data.area_data.area[e.detail.value[2]].name;
    that.setData({"form_data.city": form_city});
}

module.exports = {
    bindChange: bindChange
}

3.优化，实现弹出式三级联选

上面的picker-view本身是内嵌在页面中的，但是更多时候，我们希望能够实现需要选择时从下方弹出的效果，所以这里采用的是用picker-view来模拟。

/*一下这段css能够模拟跟picker一模一样的样式*/
.area-picker__container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0px 2px -2px #e1e1e1;
    z-index: 100;
}
.area-picker__bg {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;

}
.area-picker__header {
    background: #fbf9fe;
    line-height: 44px;
    padding-right: 30rpx;
    padding-left: 30rpx;
    color: #596993;
    font-size: 14px;
}
.area-picker-column {
    height: 44px;
    line-height: 44px;
}
.area-picker__item {
    line-height: 44px;
    margin-left: 30rpx;
    font-size: 14px;
}

<!--完整的picker.wxml-->
<view class='area-picker__bg' wx:if='{{areaShow}}'>
    <view class='area-picker__container'>
        <view class='area-picker__header space_between' bindtap='toggleArea'>
            <view>取消</view>
            <view>确定</view>
        </view>
        <picker-view class="picker-view" indicator-class='area-picker-column' style="width: 100%; height: 224px;" value="{{areaIndex}}" bindchange="bindAreaChange">
            <picker-view-column>
                <view wx:for="{{province}}" class="area-picker__item">{{item.name}}</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{city}}" class="area-picker__item">{{item.name}}</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{area}}" class="area-picker__item">{{item.name}}</view>
            </picker-view-column>
        </picker-view>
    </view>
</view>

//common.js
//弹出／隐藏picker-view的方法
function togglePicker (that) {
    that.setData({'area_data.areaShow':!that.data.area_data.areaShow});
}

module.exports = {
    province: province,
    city: city,
    area: area,
    togglePicker: togglePicker,
    bindChange: bindChange
}

//picker.js中的调用
let area = require('../../../common.js');
Page({
    data: {
        province: area.province,
        city: area.city['110000'],
        area: area.area['110100'],
        areaShow: false,
    },
    toggleArea: function() {
        var that = this;
        area.togglePicker(that);
    },
    bindAreaChange:function(e) {
        var that = this;
        area.togglePicker(that,e);
    }
})

注：除区 域的数据外其余代码均完整可用。