请选择 进入手机版 | 继续访问电脑版

喝彩资源网

查看: 472|回复: 0

微信小程序开发省市区联动教程和源码

[复制链接]

56

主题

60

帖子

308

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
308
发表于 2017-6-23 22:04:34 | 显示全部楼层 |阅读模式
微信小程序开发省市区联动教程和源码先上个效果图,大家看下
3652a296348b684d.gif
接下来我们来看具体实现的源码

直接上干货
index.wxml

  1. <import src="../../templates/address-temp"/>
  2. <template is="addressPicker"
  3.     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
  1. var city = require("../../utils/city.js");
  2.   Page({
  3.   data:{},
  4.   onLoad: function () {
  5.    console.log('onLoad...');
  6.    var that = this;
  7.    city.init(that);
  8.   }
  9. });
复制代码
address-temp.wxml

  1. <template name="addressPicker">
  2.     <view style="display:flex;margin:0;height:100%;align-items: center;justify-content: center">
  3.         <view style="width:100%;">
  4.             <picker bindchange="bindProvinceChange" value="{{provinceIndex}}" range="{{province}}">
  5.                 <view style="text-align:center;padding:10rpx;font-size:0.8rem">
  6.                 {{province[provinceIndex]}}
  7.                 </view>
  8.             </picker>
  9.         </view>
  10.         <view style="width:100%;">
  11.             <picker bindchange="bindCityChange" value="{{cityIndex}}" range="{{city}}">
  12.                 <view style="text-align:center;padding:10rpx;font-size:0.8rem">
  13.                 {{city[cityIndex]}}
  14.                 </view>
  15.             </picker>
  16.         </view>
  17.         <view style="width:100%;">
  18.             <picker bindchange="bindDistrictChange" value="{{districtIndex}}" range="{{district}}">
  19.                 <view style="text-align:center;padding:10rpx;font-size:0.8rem">
  20.                 {{district[districtIndex]}}
  21.                 </view>
  22.             </picker>
  23.         </view>
  24.     </view>
  25. </template>
复制代码
city.js

  1. var city={
  2.     province:['-请选择-','福建省'],
  3.     city:{'-请选择-':['-请选择-'],'福建省':['福州市','厦门市','泉州市']},
  4.     district:{'-请选择-':['-请选择-'],'福州市':['鼓楼区','台江区'],'厦门市':['湖里区','集美区'],'泉州市':['晋江市','安溪县']},
  5.     provinceIndex: 0,
  6.     cityIndex: 0,
  7.     districtIndex: 0,
  8.     selectedProvince:'-请选择-',
  9.     selectedCity:'-请选择-',
  10.     selectedDistrct:'-请选择-'
  11. };
  12. function init(that){
  13.     that.setData( {
  14.         'city': city
  15.     });
  16.     var bindProvinceChange = function(e){
  17.         var city=that.data.city;
  18.         that.setData({
  19.             'city.provinceIndex': e.detail.value,
  20.             'city.selectedProvince':
  21.                 city.province[e.detail.value],
  22.             'city.selectedCity':
  23.                 city.city[city.province[e.detail.value]][0],
  24.             'city.selectedDistrct':
  25.                 city.district[city.city[city.province[e.detail.value]][0]][0],
  26.             'city.cityIndex':0,
  27.             'city.districtIndex':0
  28.         });
  29.     };
  30.     var bindCityChange = function(e){
  31.         var city=that.data.city;
  32.         that.setData({
  33.             'city.cityIndex':
  34.                 e.detail.value,
  35.             'city.selectedCity':
  36.                 city.city[city.selectedProvince][e.detail.value],
  37.             'city.districtIndex':0,
  38.             'city.selectedDistrct':
  39.                 city.district[city.city[city.selectedProvince][e.detail.value]][0]
  40.         });
  41.     };
  42.     var bindDistrictChange = function(e){
  43.         var city=that.data.city;
  44.         that.setData({
  45.             'city.districtIndex': e.detail.value,
  46.             'city.selectedDistrct':city.district[city.selectedCity][e.detail.value]
  47.         });
  48.     };
  49.     that['bindProvinceChange']=bindProvinceChange;
  50.     that['bindCityChange'] = bindCityChange;
  51.     that['bindDistrictChange'] = bindDistrictChange;
  52. }
  53. module.exports={
  54.     init:init
  55. }
复制代码
下面是打包源码,会员可以直接下载
游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|喝彩资源网    

GMT+8, 2018-2-19 20:11 , Processed in 0.165722 second(s), 33 queries .

技术支持:喝彩资源网  豫ICP备16030462号-1

Powered by hecaikeji X3.2 © 2016-2018 hecai Inc.

快速回复 返回顶部 返回列表