小程序组件开发中省市区三级联动的示例分析

小编给大家分享一下小程序组件开发中省市区三级联动的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

站在用户的角度思考问题，与客户深入沟通，找到玛沁网站设计与玛沁网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广、空间域名、虚拟主机、企业邮箱。业务覆盖玛沁地区。

• 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

<?xml version="1.0" encoding="utf-8"?>

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

看完了这篇文章，相信你对“小程序组件开发中省市区三级联动的示例分析”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

网站栏目：小程序组件开发中省市区三级联动的示例分析
网址分享：https://www.cdcxhl.com/article8/joooip.html

成都网站建设公司_创新互联，为您提供电子商务、企业网站制作、网站导航、营销型网站建设、网站策划、App设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联