uni-app 仿淘宝做的地区选择器（没写完，但是能用）

<template><view>高级选择器<picker mode="multiSelector" @columnchange="uChange" :value="index" :range="array2"><view class="uni-input">{{array2[0][index[0]]}}...{{array2[1][index[1]]}}...{{array2[2][index[2]]}}</view></picker></view>
</template><script>export default {data() {return {// 第一次显示的数据是广西,南宁,宾阳array2: [['安徽省', '北京省', '重庆','福建省','甘肃省','广东省','广西壮族自治区','贵州省','海南省','河北省','河南省','黑龙江省','湖北省','湖南省','吉林省','江苏省','江西省','辽宁省','内蒙古自治区','宁夏回族自治区','青海省','山东省','山西省','陕西省','上海','四川省','天津','西藏自治区','新疆维吾尔自治区','云南省','浙江省','香港','澳门','台湾'],['安庆市', '蚌埠市', '毫州市','池州市','滁州市','阜阳市','合肥市','淮北市','淮南市','黄山市','六安市','马鞍山市','宿州市','铜陵市','芜湖市','宣城市'],['大观区','怀宁县','潜山市','宿松县','太湖县','桐城市','望江县','宜秀区','迎江区','岳西县','其它区']],index: [0,0,0],sheng:['安徽省', '北京省', '重庆','福建省','甘肃省','广东省','广西壮族自治区','贵州省','海南省','河北省','河南省','黑龙江省','湖北省','湖南省','吉林省','江苏省','江西省','辽宁省','内蒙古自治区','宁夏回族自治区','青海省','山东省','山西省','陕西省','上海','四川省','天津','西藏自治区','新疆维吾尔自治区','云南省','浙江省','香港','澳门','台湾'],shi:[// '安徽省',['安庆市', '蚌埠市', '毫州市','池州市','滁州市','阜阳市','合肥市','淮北市','淮南市','黄山市','六安市','马鞍山市','宿州市','铜陵市','芜湖市','宣城市'],// '北京省',['北京市'],// '重庆',['重庆市'],// '福建省',['福州市','龙岩市','南平市','宁德市','莆田市','泉州市','三明市','厦门市','漳州市'],// '甘肃省',['白银市','定西市','甘南藏族自治州','嘉峪关市','金昌市','酒泉市','兰州市','临夏回族自治州','陇南市','平凉市','庆阳市','天水市','武威市','张掖市'],// '广东省',['潮州市','东莞市','东沙群岛','佛山市','广州市','河源市','惠州市','江门市','揭阳市','茂名市','梅州市','清远市','汕头市','汕尾市','韶关市','深圳市','阳江市','云浮市','湛江市','肇庆市','中山市','珠海市'],// '广西壮族自治区',['百色市','北海市','崇左市','防城港市','贵港市','桂林市','河池市','贺州市','来宾市','柳州市','南宁市','钦州市','梧州市','玉林市'],// '贵州省',['安顺市','毕节市','贵阳市','六盘水市','黔东南苗族侗族自治州','黔南布依族苗族自治州','黔西南布依族苗族自治州','铜仁市','遵义市'],// '海南省',['白沙黎族自治县','保亭黎族苗族自治县','昌江黎族自治县','澄迈县','儋州市','定安县','东方市','海口市','乐东黎族自治县','临高县','陵水黎族自治县','琼海市','琼中黎族苗族自治县','三沙市','三亚市','屯昌县','万宁市','文昌市','五指山市'],// '河北省',['保定市','沧州市','承德市','邯郸市','衡水市','廊坊市','秦皇岛市','石家庄市','唐山市','邢台市','张家口市'],// '河南省',['安阳市','鹤壁市','济源市','焦作市','开封市','漯河市','洛阳市','南阳市','平顶山市','濮阳市','三门峡市','商丘市','新乡市','信阳市','许昌市','郑州市','周口市','驻马店市'],// '黑龙江省',['大庆市','大兴安岭地区','哈尔滨市','鹤岗市','黑河市','鸡西市','佳木斯市','牡丹江市','齐齐哈尔市','七台河市','双鸭山市','绥化市','伊春市'],// '湖北省',['鄂州市','恩施土家族苗族自治州','黄冈市','黄石市','荆门市','荆州市','潜江市','神农架林区','十堰市','随州市','天门市','武汉市','咸宁市','仙桃市','襄阳市','孝感市','宜昌市'],// '湖南省',['常德市','长沙市','郴州市','衡阳市','怀化市','娄底市','邵阳市','湘潭市','湘西土家族苗族自治州','益阳市','永州市','岳阳市','张家界市','株洲市'],// '吉林省',['白城市','白山市','长春市','吉林市','辽源市','四平市','松原市','通化市','延边朝阳族自治州'],// '江苏省',['常州市','淮安市','连云港市','南京市','南通市','宿迁市','苏州市','泰州市','无锡市','徐州市','盐城市','扬州市','镇江市'],// '江西省',['抚州市','赣州市','吉安市','景德镇市','九江市','南昌市','萍乡市','上饶市','新余市','宜春市','鹰潭市'],// '辽宁省',['鞍山市','本溪市','朝阳市','大连市','丹东市','抚顺市','阜新市','葫芦岛市','锦州市','辽阳市','盘锦市','沈阳市','铁岭市','营口市'],// '内蒙古自治区',['阿拉善盟','巴彦淖尔市','包头市','赤峰市','鄂尔多斯市','呼和浩特市','呼伦贝尔市','通辽市','乌海市','乌兰察布市','锡林郭勒盟','兴安盟'],// '宁夏回族自治区',['固原市','石嘴山市','吴忠市','银川市','中卫市'],// '青海省',['果洛藏族自治州','海北藏族自治州','海东市','海南藏族自治州','海西蒙古族藏族自治州','黄南藏族自治州','西宁市','玉树藏族自治州'],// '山东省',['滨州市','德州市','东营市','菏泽市','济南市','济宁市','聊城市','临沂市','青岛市','日照市','泰安市','潍坊市','威海市','烟台市','枣庄市','淄博市'],// '山西省',['长治市','大同市','晋城市','晋中市','临汾市','吕梁市','朔州市','太原市','忻州市','阳泉市','运城市'],// '陕西省',['安康市','宝鸡市','汉中市','商洛市','铜川市','渭南市','西安市','咸阳市','延安市','榆林市'],// '上海',['上海市'],// '四川省',['阿坝藏族羌族自治州','巴中市','成都市','达州市','德阳市','甘孜藏族自治州','广安市','广元市','乐山市','凉山彝族自治州','泸州市','眉山市','绵阳市','南充市','内江市','攀枝花市','遂宁市','雅安市','宜宾市','自贡市','资阳市'],// '天津',['天津市'],// '西藏自治区',['阿里地区','昌都市','拉萨市','林芝市','那曲布','日喀则市','山南市'],// '新疆维吾尔自治区',['阿克苏地区','阿拉尔市','阿勒泰地区','巴音郭楞蒙古自治州','北屯市','博尔塔拉蒙古自治州','昌吉回族自治州','哈密市','和田地区','喀什地区','可克达拉市','克拉玛依市','克孜勒苏柯尔克孜自治州','昆玉市','石河子市','双河市','塔城地区','铁门关市','吐鲁番市','图木舒克市','五家渠市','乌鲁木齐市','伊犁哈萨克自治州'],// '云南省',['保山市','楚雄彝族自治州','大理白族自治州','德宏傣族景颇族自治州','迪庆藏族自治州','红河哈尼族彝族自治州','昆明市','丽江市','临沧市','怒江僳僳族自治州','普洱市','曲靖市','文山壮族苗族自治州','西双版纳傣族自治州','玉溪市','昭通市'],// '浙江省',['杭州市','湖州市','嘉兴市','金华市','丽水市','宁波市','衢州市','绍兴市','台州市','温州市','丹山市'],// '香港',['九龙','香港岛','新界'],// '澳门',['澳门半岛','离岛'],// '台湾',['高雄市','花莲县','基隆市','嘉义市','嘉义县','金门县','连江县','苗粟县','南投县','澎湖县','屏东县','台北市','台东县','台南市','台中市','桃园市','新北市','新竹市','新竹县','宜兰县','云林县','彰化县']],qu:[[// '安庆市', ['大观区', '怀宁县', '潜山市', '宿松县', '太湖县', '桐城市', '望江县', '宜秀区', '迎江区', '岳西县','其它区',],// '蚌埠市', ['蚌山区','固镇县', '淮上区', '怀远县', '龙子湖区', '其他区', '五河县', '禹会区'],// '毫州市',['涡阳县', '利辛县', '蒙城县', '其他区', '谯城区'],// '池州市',['东至县', '贵池区', '其他区', '青阳县', '石台县'],// '滁州市', ['定远县', '凤阳县', '来安县', '琅琊区', '明光市', '南谯区', '其他区', '全椒县', '天长市'],// '阜阳市', ['阜南县', '界首市', '临泉县', '其他区', '天和县', '颍东区', '颍泉区', '颍上县', '颍州区'],// '合肥市', ['包河区', '长丰县', '巢湖市', '肥东县', '肥西县', '庐江县', '庐阳区', '其他区', '蜀山区', '琼海区'],// '淮北市', ['杜集区', '烈山区', '其他区', '濉溪县', '相山区'],// '淮南市', ['八公山区', '大通区', '凤台县', '潘集区', '其他区', '寿县', '田家庵区', '谢家集区'],// '黄山市', ['黄山区', '徽州区', '祁门县', '其他区', '歙县', '屯溪区', '休宁县', '黟县'],// '六安市',['霍邱县', '霍山县', '金安区', '金寨县', '其他区', '舒城县', '叶集区', '裕安区'],// '马鞍山市', ['博望区', '当涂县', '含山县', '和县', '花山区', '其他区', '雨山区'],// '宿州市',['砀山县', '灵璧县', '其他区', '泗县', '萧县', '埇桥区'],// '铜陵市',['郊区', '其他区', ' 铜官区', '义安区', '枞阳县'],// '芜湖市',['繁昌县', '镜湖区', '鸠江区', '南陵县', '其他区', '三山区', '芜湖县', '无为县', '弋江区'],// '宣城市',['广德县', '绩溪县', '旌德县', '泾县', '郎溪县', '宁国市', '其他区', '宣州区']],[['昌平区','朝阳区','大兴区','东城区','房山区','丰台区','海淀区','怀柔区','门头沟区','密云区','平谷区','其他区','石景山区','顺义区','通州区','西城区','延庆区']],[['巴南区','北碚区','璧山区','长寿区','城口县','大渡口区','大足区','垫江县','丰都县','奉节县','涪陵区','合川区','江北区','江津区','九龙坡区','开州区','梁平区','南岸区','南川区','彭水苗族土家族自治县','綦江区','其他区','黔江区','荣昌区','沙坪坝区','石柱土家族自治县','铜梁区','潼南区','万州区','武隆区','巫山县','巫溪县','秀山土家族苗族自治县','永川县','酉阳土家族苗族自治县','渝北区','渝中区','云阳区','忠县']],[// '福州市',['仓山区','福清市','鼓楼区','晋安区','连江县','罗源县','马尾区','闽侯县','闽清县','平潭县','其他区','台江区','永泰县','长乐区'],// '龙岩市',['长汀县','连城县','其他区','上杭县','武平县','新罗区','永定区','漳平市'],// '南平市',['光泽县','建瓯市','建阳区','浦城县','其他区','邵武市','顺昌县','松溪县','武夷山市','延平区','政和县'],// '宁德市',['福安市','福鼎市','古田县','蕉城区','屏南县','其他区','寿宁县','霞浦县','柘荣县','周宁县'],// '莆田市',['城厢区','涵江区','荔城区','其他区','仙游县','秀屿区'],// '泉州市',['安溪县','德化县','丰泽区','惠安县','晋江市','金门县','鲤城区','洛江区','南安市','其他区','泉港区','石狮市','永春县'],// '三明市',['大田县','建宁县','将乐县','梅列区','明溪县','宁化县','其他区','清流县','三元区','沙县','泰宁县','永安市','尤溪县'],// '厦门市',['海沧区','湖里区','集美区','其他区','思明区','同安区','翔安区'],// '漳州市',['长泰县','东山县','华安县','龙海市','龙文区','南靖县','平和县','其他区','芗城区','云霄县','漳浦县','诏安县']],[],[],],ahs:['安庆市', ['大观区', '怀宁县', '潜山市', '宿松县', '太湖县', '桐城市', '望江县', '宜秀区', '迎江区', '岳西县','其它区',],'蚌埠市',  ['蚌山区','固镇县', '淮上区', '怀远县', '龙子湖区', '其他区', '五河县', '禹会区'],'毫州市', ['涡阳县', '利辛县', '蒙城县', '其他区', '谯城区'],'池州市', ['东至县', '贵池区', '其他区', '青阳县', '石台县'],'滁州市', ['定远县', '凤阳县', '来安县', '琅琊区', '明光市', '南谯区', '其他区', '全椒县', '天长市'],'阜阳市', ['阜南县', '界首市', '临泉县', '其他区', '天和县', '颍东区', '颍泉区', '颍上县', '颍州区'],'合肥市', ['包河区', '长丰县', '巢湖市', '肥东县', '肥西县', '庐江县', '庐阳区', '其他区', '蜀山区', '琼海区'],'淮北市', ['杜集区', '烈山区', '其他区', '濉溪县', '相山区'],'淮南市', ['八公山区', '大通区', '凤台县', '潘集区', '其他区', '寿县', '田家庵区', '谢家集区'],'黄山市', ['黄山区', '徽州区', '祁门县', '其他区', '歙县', '屯溪区', '休宁县', '黟县'],'六安市', ['霍邱县', '霍山县', '金安区', '金寨县', '其他区', '舒城县', '叶集区', '裕安区'],'马鞍山市', ['博望区', '当涂县', '含山县', '和县', '花山区', '其他区', '雨山区'],'宿州市',['砀山县', '灵璧县', '其他区', '泗县', '萧县', '埇桥区'],'铜陵市',['郊区', '其他区', ' 铜官区', '义安区', '枞阳县'],'芜湖市',['繁昌县', '镜湖区', '鸠江区', '南陵县', '其他区', '三山区', '芜湖县', '无为县', '弋江区'],'宣城市',['广德县', '绩溪县', '旌德县', '泾县', '郎溪县', '宁国市', '其他区', '宣州区']],muban:[['','','','','','','','','','','','','','','','','','','','','']],gs:['白银市',['白银区','会宁县','景泰县','靖远县','平川区','其他区'],'定西市',['安定区','临洮县','陇西县','岷县','其他区','通渭县','渭源县','漳县'],'甘南藏族自治州',['迭部县','合作市','临潭县','碌曲县','玛曲县','其他区','夏河县','舟曲县','卓尼县','','','','','','','','','','','',''],'嘉峪关市',['长城去','镜铁区','文殊镇','新城镇','雄关区','峪泉镇'],'金昌市',['金川区','其他区','永昌县'],'酒泉市',['阿克塞哈萨克族自治县','敦煌市','瓜州县','金塔县','其他区','肃北蒙古族自治县','肃州区','玉门市'],'兰州市',['安宁区','城关区','皋兰县','红古区','七里河区','其他区','西固区','永登县','榆中县','','','','','','','','','','','',''],'临夏回族自治州',['东乡族自治县','广河县','和政县','积石山保安族东乡族撒拉族自治县','康乐县','临夏市','临夏县','其他区','永靖县','','','','','','','','','','','',''],'陇南市',['成县','宕昌县','徽县','康县','礼县','两当县','其他区','文县','武都区','西和县','','','','','','','','','','',''],'平凉市',['崇信县','华亭县','泾川县','静宁县','崆峒区','灵台县','其他区','庄浪县'],'庆阳市',['合水县','华池县','环县','宁县','其他区','庆城县','西峰区','镇原县','正宁县','','','','','','','','','','','',''],'天水市',['甘谷县','麦积区','其他区','秦安县','秦州区','清水县','武山县','张家川回族自治县'],'武威市',['古浪县','凉州区','民勤县','其他区','天祝藏族自治县'],'张掖市',['甘州区','高台县','临泽县','民乐县','其他区','山丹县','肃南裕固族自治县']],fj:['福州市',['仓山区','福清市','鼓楼区','晋安区','连江县','罗源县','马尾区','闽侯县','闽清县','平潭县','其他区','台江区','永泰县','长乐区'],'龙岩市',['长汀县','连城县','其他区','上杭县','武平县','新罗区','永定区','漳平市'],'南平市',['光泽县','建瓯市','建阳区','浦城县','其他区','邵武市','顺昌县','松溪县','武夷山市','延平区','政和县'],'宁德市',['福安市','福鼎市','古田县','蕉城区','屏南县','其他区','寿宁县','霞浦县','柘荣县','周宁县'],'莆田市',['城厢区','涵江区','荔城区','其他区','仙游县','秀屿区'],'泉州市',['安溪县','德化县','丰泽区','惠安县','晋江市','金门县','鲤城区','洛江区','南安市','其他区','泉港区','石狮市','永春县'],'三明市',['大田县','建宁县','将乐县','梅列区','明溪县','宁化县','其他区','清流县','三元区','沙县','泰宁县','永安市','尤溪县'],'厦门市',['海沧区','湖里区','集美区','其他区','思明区','同安区','翔安区'],'漳州市',['长泰县','东山县','华安县','龙海市','龙文区','南靖县','平和县','其他区','芗城区','云霄县','漳浦县','诏安县']],bj:['北京市',['昌平区','朝阳区','大兴区','东城区','房山区','丰台区','海淀区','怀柔区','门头沟区','密云区','平谷区','其他区','石景山区','顺义区','通州区','西城区','延庆区']],sh:['上海市',['宝山区','长宁区','崇明区','奉贤区','虹口区','黄浦区','嘉定区','金山区','静安区','闵兴区','浦东新区','普陀区','其他区','青浦区','松江区','徐汇区','杨浦区']],muban:['重庆市',['巴南区','北碚区','璧山区','长寿区','城口县','大渡口区','大足区','垫江县','丰都县','奉节县','涪陵区','合川区','江北区','江津区','九龙坡区','开州区','梁平区','南岸区','南川区','彭水苗族土家族自治县','綦江区','其他区','黔江区','荣昌区','沙坪坝区','石柱土家族自治县','铜梁区','潼南区','万州区','武隆区','巫山县','巫溪县','秀山土家族苗族自治县','永川县','酉阳土家族苗族自治县','渝北区','渝中区','云阳区','忠县']],muban:['天津市',['宝坻区','北辰区','滨海新区','东丽区','河北区','河东区','和平区','河西区','红桥区','蓟州区','津南区','静海区','南开区','宁河区','其他区','武清区','西青区']],}},methods: {bindPickerChange: function(e) {// 当改变第一次的时候判断是改变了第几列this.index[e.detail.colum] = e.detail.valueswitch (e.detail.colum){case 0:// 改变了第一列，然后判断是改变了第几个值switch (this.index[0]){// 看第一列选择了这一列的哪个值，那么第二列放那些市，第三列要换成第一个市的什么镇case 0:this.array2[1] = ['东莞市','佛山市']this.array2[2] = ['茶山镇','常平镇']// this.array2[2] = ['德州市','济南市']}// 换第一个下标的值,换第二个下标的值this.index.splice(1,1,0)this.index.splice(2,1,0)break}},uChange: function(e) {// 当改变第一次的时候判断是改变了第几列// console.log(this.shi[3])// console.log(this.qu[this.index[0]][1])this.index[e.detail.column] = e.detail.valuevar col = e.detail.columnif(col == 0){for(var i=0;i<this.sheng.length;i++){if(this.index[0] == i){console.log(i)this.array2[1] = this.shi[i]this.array2[2] = this.qu[this.index[0]][0]}}this.index.splice(1,1,0)this.index.splice(2,1,0)}if(col == 1){var fir_col = this.index[0]var sec_col = this.index[1]for(var j=0;j<this.sheng.length;j++){if(fir_col == j){for(var z=0;z<this.shi.length;z++){if(sec_col == z){this.array2[2] = this.qu[this.index[fir_col]][sec_col]}}}}// if( fir_col == 0){判断第一行选中了第几个//  if(sec_col == 0){判断第二行选中了第几个//        this.array2[2] = this.qu[this.index[fir_col]][sec_col]//   }// }// return }this.index.splice(2,1,0)return },}}
</script><style></style>

【uni-app 仿淘宝做的地区选择器】相关推荐

百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）
想仿淘宝做一个物流查询,分为:寄件点.当前点. 收件点和路线图. 快递已走的路径(寄件点到当前点的颜色)和未走的路径(当前点到收件点)用颜色进行区分. 利用百度地图提供的API(当时遇到了点问 ...
仿淘宝打开app时识别淘口令和解析保存到本地的带二维码图片的网址
实现两个功能 1.仿淘宝淘口令打开app时解析连接(如果复制得到的信息不是可直接使用的数据,那么还需要加一步拿到这些信息去后台获取具体信息,因为项目设计复制完就是一串地址,所以没做二次请求处理) ...
Ecshop 商品页配送方式添加实现仿淘宝按地区显示运费
Ecshop实现仿淘宝按地区显示运费淘宝网(Taobao)购物的宝贝详情页面,可以针对不同地区显示不同运费,运费由后台设定:结算时间,按重量.件数计算运费.Ecshop本身有配送方式插件,已有多家物 ...
使用WEX5移动开发工具制作仿淘宝APP
毕业设计-使用WEX5移动开发工具制作仿淘宝APP 系统设计的意义本课题来源于对日常逛超市.购物的生活体验和指导老师的提示.本系统是基于 WeX5的仿淘宝App系统,它商家们提供了一个更广阔的商品推 ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
安卓APP源码和设计报告——仿淘宝水果商城
项目名称仿淘宝水果商城项目概述随着互联网技术地高速发展,计算机进入到每一个人的生活里,从人们的生活方式到整个社会的运转都产生了巨大的变革,而在信息技术发达的今天,互联网的各种娱乐方式都在渗透到人 ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
java B2B2C 仿淘宝电子商城系统-Spring Cloud Eureka参数配置项详解
Eureka涉及到的参数配置项数量众多,它的很多功能都是通过参数配置来实现的,了解这些参数的含义有助于我们更好的应用Eureka的各种功能,下面对Eureka的配置项做具体介绍,供大家参考. 需要JA ...

【uni-app 仿淘宝做的地区选择器】

uni-app 仿淘宝做的地区选择器（没写完，但是能用）

【uni-app 仿淘宝做的地区选择器】相关推荐

最新文章

热门文章