1
回答
零云lingyun.net技术分享之小程序开发地区三级联动
终于搞明白,存储TCO原来是这样算的>>>   

微信小程序里经常会遇到需要实现地区选择的功能,下面做一个简单分享,欢迎交流,产品开发解决方案零云lingyun.net

实现地区三级联选

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中,方便复用
//此处省略区域选择需要的完整的json数据。

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);
    }
})

注:除区域的数据太长未给出外其余代码均完整可用。

举报
CoreThink
发帖于4个月前 1回/114阅
顶部