置顶 精华

小程序组件之省市区三级联动

  • • 发表于 6个月前
  • • 作者 陈小术
  • • 2572 次浏览
  • • 30 条评论
  • • 最后编辑时间 6个月前
  • • 来自 [技术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

效果图:

效果图

源码

  • index.wxml
<import src="../../templates/address-temp"/>
<template is="addressPicker" 
    data="{{provinceIndex:city.provinceIndex,cityIndex:city.cityIndex,districtIndex:city.districtIndex,province:city.province,city:city.city[city.selectedProvince],district:city.district[city.selectedCity]}}"/>
  • index.js
  var city = require("../../utils/city.js");
  Page({
  data:{},
  onLoad: function () {
   console.log('onLoad...');
   var that = this;
   city.init(that);
  }
 });
  • address-temp.wxml
<template name="addressPicker">
    <view style="display:flex;margin:0;height:100%;align-items: center;justify-content: center">
        <view style="width:100%;">
            <picker bindchange="bindProvinceChange" value="{{provinceIndex}}" range="{{province}}">
                <view style="text-align:center;padding:10rpx;font-size:0.8rem">
                {{province[provinceIndex]}}
                </view>
            </picker>
        </view>
        <view style="width:100%;">
            <picker bindchange="bindCityChange" value="{{cityIndex}}" range="{{city}}">
                <view style="text-align:center;padding:10rpx;font-size:0.8rem">
                {{city[cityIndex]}}
                </view>
            </picker>
        </view>
        <view style="width:100%;">
            <picker bindchange="bindDistrictChange" value="{{districtIndex}}" range="{{district}}">
                <view style="text-align:center;padding:10rpx;font-size:0.8rem">
                {{district[districtIndex]}}
                </view>
            </picker>
        </view>
    </view>
</template>
  • city.js
var city={
    province:['-请选择-','福建省'],
    city:{'-请选择-':['-请选择-'],'福建省':['福州市','厦门市','泉州市']},
    district:{'-请选择-':['-请选择-'],'福州市':['鼓楼区','台江区'],'厦门市':['湖里区','集美区'],'泉州市':['晋江市','安溪县']},
    provinceIndex: 0,
    cityIndex: 0,
    districtIndex: 0,
    selectedProvince:'-请选择-',
    selectedCity:'-请选择-',
    selectedDistrct:'-请选择-'
};

function init(that){
    that.setData( { 
        'city': city 
    }); 
    var bindProvinceChange = function(e){
        var city=that.data.city;
        that.setData({
            'city.provinceIndex': e.detail.value,
            'city.selectedProvince':
                city.province[e.detail.value],
            'city.selectedCity':
                city.city[city.province[e.detail.value]][0],
            'city.selectedDistrct':
                city.district[city.city[city.province[e.detail.value]][0]][0],
            'city.cityIndex':0,
            'city.districtIndex':0
        });
    };
    var bindCityChange = function(e){
        var city=that.data.city;
        that.setData({
            'city.cityIndex': 
                e.detail.value,
            'city.selectedCity':
                city.city[city.selectedProvince][e.detail.value],
            'city.districtIndex':0,
            'city.selectedDistrct':
                city.district[city.city[city.selectedProvince][e.detail.value]][0]
        });
    };
    var bindDistrictChange = function(e){
        var city=that.data.city;
        that.setData({
            'city.districtIndex': e.detail.value,
            'city.selectedDistrct':city.district[city.selectedCity][e.detail.value]
        });
    };
    that['bindProvinceChange']=bindProvinceChange;
    that['bindCityChange'] = bindCityChange;
    that['bindDistrictChange'] = bindDistrictChange;
}

module.exports={
    init:init
}

实例下载:

分享到:
评论区(共30条评论)
30条评论
Ctrl+Enter
作者

陈小术

陈小术

APP:1 帖子:12 回复:18 积分:2451

已加入社区[200]天

:-)

作者详情》
精品推荐课程更多
扫码入群
Top