小程序车型品牌车系三级选择(地区也一样)

最新推荐文章于 2024-07-03 23:37:12 发布

菜鸟老五

最新推荐文章于 2024-07-03 23:37:12 发布

阅读量1w

点赞数 6

分类专栏：小程序 VUE/H5 文章标签：小程序品牌地区三级列表选择

本文链接：https://blog.csdn.net/qq_35695041/article/details/80368014

版权

小程序同时被 2 个专栏收录

63 篇文章

订阅专栏

VUE/H5

30 篇文章

订阅专栏

var cityObj = [
  { "id": "1", "provincecode": "1", "images": "../images/Keepselling_tag@2x.png", "city": "全国", "code": "1", "initial": "*" },

  { "id": "35", "provincecode": "150000", "images": "../images/Keepselling_tag@2x.png", "city": "\u963f\u62c9\u5584\u76df", "code": "152900", "initial": "A" },
  { "id": "38", "provincecode": "210000", "images": "../images/Keepselling_tag@2x.png", "city": "\u978d\u5c71\u5e02", "code": "210300", "initial": "A" }, { "id": "105", "provincecode": "340000", "city": "\u5b89\u5e86\u5e02", "code": "340800", "initial": "A" }, { "id": "156", "provincecode": "410000", "city": "\u5b89\u9633\u5e02", "code": "410500", "initial": "A" }, { "id": "256", "provincecode": "510000", "city": "\u963f\u575d\u85cf\u65cf\u7f8c\u65cf\u81ea\u6cbb\u5dde", "code": "513200", "initial": "A" }, { "id": "262", "provincecode": "520000", "city": "\u5b89\u987a\u5e02", "code": "520400", "initial": "A" }, { "id": "289", "provincecode": "540000", "city": "\u963f\u91cc\u5730\u533a", "code": "542500", "initial": "A" }, { "id": "299", "provincecode": "610000", "city": "\u5b89\u5eb7\u5e02", "code": "610900", "initial": "A" }, { "id": "335", "provincecode": "650000", "city": "\u963f\u514b\u82cf\u5730\u533a", "code": "652900", "initial": "A" }, { "id": "341", "provincecode": "650000", "city": "\u963f\u52d2\u6cf0\u5730\u533a", "code": "654300", "initial": "A" }, { "id": "1", "provincecode": "110000", "city": "\u5317\u4eac\u5e02", "code": "110100", "initial": "B" }, { "id": "7", "provincecode": "130000", "city": "\u4fdd\u5b9a\u5e02", "code": "130600", "initial": "B" }, { "id": "25", "provincecode": "150000", "city": "\u5305\u5934\u5e02", "code": "150200", "initial": "B" }, { "id": "31", "provincecode": "150000", "city": "\u5df4\u5f66\u6dd6\u5c14\u5e02", "code": "150800", "initial": "B" }, { "id": "40", "provincecode": "210000", "city": "\u672c\u6eaa\u5e02", "code": "210500", "initial": "B" }, { "id": "55", "provincecode": "220000", "city": "\u767d\u5c71\u5e02", "code": "220600", "initial": "B" }, { "id": "57", "provincecode": "220000", "city": "\u767d\u57ce\u5e02", "code": "220800", "initial": "B" }, { "id": "100", "provincecode": "340000", "city": "\u868c\u57e0\u5e02", "code": "340300", "initial": "B" }, { "id": "150", "provincecode": "370000", "city": "\u6ee8\u5dde\u5e02", "code": "371600", "initial": "B" }, { "id": "222", "provincecode": "450000", "city": "\u5317\u6d77\u5e02", "code": "450500", "initial": "B" }, { "id": "227", "provincecode": "450000", "city": "\u767e\u8272\u5e02", "code": "451000", "initial": "B" }, { "id": "254", "provincecode": "510000", "city": "\u5df4\u4e2d\u5e02", "code": "511900", "initial": "B" }, { "id": "265", "provincecode": "520000", "city": "\u6bd5\u8282\u5730\u533a", "code": "522400", "initial": "B" }, { "id": "271", "provincecode": "530000", "city": "\u4fdd\u5c71\u5e02", "code": "530500", "initial": "B" }, { "id": "293", "provincecode": "610000", "city": "\u5b9d\u9e21\u5e02", "code": "610300", "initial": "B" }, { "id": "304", "provincecode": "620000", "city": "\u767d\u94f6\u5e02", "code": "620400", "initial": "B" }, { "id": "333", "provincecode": "650000", "city": "\u535a\u5c14\u5854\u62c9\u8499\u53e4\u81ea\u6cbb\u5dde", "code": "652700", "initial": "B" }, { "id": "334", "provincecode": "650000", "city": "\u5df4\u97f3\u90ed\u695e\u8499\u53e4\u81ea\u6cbb\u5dde", "code": "652800", "initial": "B" }, { "id": "9", "provincecode": "130000", "city": "\u627f\u5fb7\u5e02", "code": "130800", "initial": "C" }, { "id": "10", "provincecode": "130000", "city": "\u6ca7\u5dde\u5e02", "code": "130900", "initial": "C" }, { "id": "16", "provincecode": "140000", "city": "\u957f\u6cbb\u5e02", "code": "140400", "initial": "C" }, { "id": "27", "provincecode": "150000", "city": "\u8d64\u5cf0\u5e02", "code": "150400", "initial": "C" }, { "id": "48", "provincecode": "210000", "city": "\u671d\u9633\u5e02", "code": "211300", "initial": "C" }, { "id": "50", "provincecode": "220000", "city": "\u957f\u6625\u5e02", "code": "220100", "initial": "C" }, { "id": "77", "provincecode": "320000", "city": "\u5e38\u5dde\u5e02", "code": "320400", "initial": "C" }, { "id": "107", "provincecode": "340000", "city": "\u6ec1\u5dde\u5e02", "code": "341100", "initial": "C" }, { "id": "110", "provincecode": "340000", "city": "\u5de2\u6e56\u5e02", "code": "341400", "initial": "C" }, { "id": "113", "provincecode": "340000", "city": "\u6c60\u5dde\u5e02", "code": "341700", "initial": "C" }, { "id": "183", "provincecode": "430000", "city": "\u957f\u6c99\u5e02", "code": "430100", "initial": "C" }, { "id": "189", "provincecode": "430000", "city": "\u5e38\u5fb7\u5e02", "code": "430700", "initial": "C" }, { "id": "192", "provincecode": "430000", "city": "\u90f4\u5dde\u5e02", "code": "431000", "initial": "C" }, { "id": "215", "provincecode": "440000", "city": "\u6f6e\u5dde\u5e02", "code": "445100", "initial": "C" }, { "id": "231", "provincecode": "450000", "city": "\u5d07\u5de6\u5e02", "code": "451400", "initial": "C" }, { "id": "238", "provincecode": "510000", "city": "\u6210\u90fd\u5e02", "code": "510100", "initial": "C" }, { "id": "276", "provincecode": "530000", "city": "\u695a\u96c4\u5f5d\u65cf\u81ea\u6cbb\u5dde", "code": "532300", "initial": "C" }, { "id": "285", "provincecode": "540000", "city": "\u660c\u90fd\u5730\u533a", "code": "542100", "initial": "C" }, { "id": "332", "provincecode": "650000", "city": "\u660c\u5409\u56de\u65cf\u81ea\u6cbb\u5dde", "code": "652300", "initial": "C" }, { "id": "14", "provincecode": "140000", "city": "\u5927\u540c\u5e02", "code": "140200", "initial": "D" }, { "id": "37", "provincecode": "210000", "city": "\u5927\u8fde\u5e02", "code": "210200", "initial": "D" }, { "id": "41", "provincecode": "210000", "city": "\u4e39\u4e1c\u5e02", "code": "210600", "initial": "D" }, { "id": "64", "provincecode": "230000", "city": "\u5927\u5e86\u5e02", "code": "230600", "initial": "D" }, { "id": "71", "provincecode": "230000", "city": "\u5927\u5174\u5b89\u5cad\u5730\u533a", "code": "232700", "initial": "D" }, { "id": "139", "provincecode": "370000", "city": "\u4e1c\u8425\u5e02", "code": "370500", "initial": "D" }, { "id": "148", "provincecode": "370000", "city": "\u5fb7\u5dde\u5e02", "code": "371400", "initial": "D" }, { "id": "213", "provincecode": "440000", "city": "\u4e1c\u839e\u5e02", "code": "441900", "initial": "D" }, { "id": "242", "provincecode": "510000", "city": "\u5fb7\u9633\u5e02", "code": "510600", "initial": "D" }, { "id": "252", "provincecode": "510000", "city": "\u8fbe\u5dde\u5e02", "code": "511700", "initial": "D" }, { "id": "280", "provincecode": "530000", "city": "\u5927\u7406\u767d\u65cf\u81ea\u6cbb\u5dde", "code": "532900", "initial": "D" }, { "id": "281", "provincecode": "530000", "city": "\u5fb7\u5b8f\u50a3\u65cf\u666f\u9887\u65cf\u81ea\u6cbb\u5dde", "code": "533100", "initial": "D" }, { "id": "283", "provincecode": "530000", "city": "\u8fea\u5e86\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "533400", "initial": "D" }, { "id": "311", "provincecode": "620000", "city": "\u5b9a\u897f\u5e02", "code": "621100", "initial": "D" }, { "id": "29", "provincecode": "150000", "city": "\u9102\u5c14\u591a\u65af\u5e02", "code": "150600", "initial": "E" }, { "id": "174", "provincecode": "420000", "city": "\u9102\u5dde\u5e02", "code": "420700", "initial": "E" }, { "id": "181", "provincecode": "420000", "city": "\u6069\u65bd\u571f\u5bb6\u65cf\u82d7\u65cf\u81ea\u6cbb\u5dde", "code": "422800", "initial": "E" }, { "id": "39", "provincecode": "210000", "city": "\u629a\u987a\u5e02", "code": "210400", "initial": "F" }, { "id": "44", "provincecode": "210000", "city": "\u961c\u65b0\u5e02", "code": "210900", "initial": "F" }, { "id": "108", "provincecode": "340000", "city": "\u961c\u9633\u5e02", "code": "341200", "initial": "F" }, { "id": "115", "provincecode": "350000", "city": "\u798f\u5dde\u5e02", "code": "350100", "initial": "F" }, { "id": "133", "provincecode": "360000", "city": "\u629a\u5dde\u5e02", "code": "361000", "initial": "F" }, { "id": "202", "provincecode": "440000", "city": "\u4f5b\u5c71\u5e02", "code": "440600", "initial": "F" }, { "id": "223", "provincecode": "450000", "city": "\u9632\u57ce\u6e2f\u5e02", "code": "450600", "initial": "F" }, { "id": "130", "provincecode": "360000", "city": "\u8d63\u5dde\u5e02", "code": "360700", "initial": "G" }, { "id": "197", "provincecode": "440000", "city": "\u5e7f\u5dde\u5e02", "code": "440100", "initial": "G" }, { "id": "220", "provincecode": "450000", "city": "\u6842\u6797\u5e02", "code": "450300", "initial": "G" }, { "id": "225", "provincecode": "450000", "city": "\u8d35\u6e2f\u5e02", "code": "450800", "initial": "G" }, { "id": "244", "provincecode": "510000", "city": "\u5e7f\u5143\u5e02", "code": "510800", "initial": "G" }, { "id": "251", "provincecode": "510000", "city": "\u5e7f\u5b89\u5e02", "code": "511600", "initial": "G" }, { "id": "257", "provincecode": "510000", "city": "\u7518\u5b5c\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "513300", "initial": "G" }, { "id": "259", "provincecode": "520000", "city": "\u8d35\u9633\u5e02", "code": "520100", "initial": "G" }, { "id": "314", "provincecode": "620000", "city": "\u7518\u5357\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "623000", "initial": "G" }, { "id": "320", "provincecode": "630000", "city": "\u679c\u6d1b\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "632600", "initial": "G" }, { "id": "326", "provincecode": "640000", "city": "\u56fa\u539f\u5e02", "code": "640400", "initial": "G" }, { "id": "5", "provincecode": "130000", "city": "\u90af\u90f8\u5e02", "code": "130400", "initial": "H" }, { "id": "12", "provincecode": "130000", "city": "\u8861\u6c34\u5e02", "code": "131100", "initial": "H" }, { "id": "24", "provincecode": "150000", "city": "\u547c\u548c\u6d69\u7279\u5e02", "code": "150100", "initial": "H" }, { "id": "30", "provincecode": "150000", "city": "\u547c\u4f26\u8d1d\u5c14\u5e02", "code": "150700", "initial": "H" }, { "id": "49", "provincecode": "210000", "city": "\u846b\u82a6\u5c9b\u5e02", "code": "211400", "initial": "H" }, { "id": "59", "provincecode": "230000", "city": "\u54c8\u5c14\u6ee8\u5e02", "code": "230100", "initial": "H" }, { "id": "62", "provincecode": "230000", "city": "\u9e64\u5c97\u5e02", "code": "230400", "initial": "H" }, { "id": "69", "provincecode": "230000", "city": "\u9ed1\u6cb3\u5e02", "code": "231100", "initial": "H" }, { "id": "81", "provincecode": "320000", "city": "\u6dee\u5b89\u5e02", "code": "320800", "initial": "H" }, { "id": "87", "provincecode": "330000", "city": "\u676d\u5dde\u5e02", "code": "330100", "initial": "H" }, { "id": "91", "provincecode": "330000", "city": "\u6e56\u5dde\u5e02", "code": "330500", "initial": "H" }, { "id": "98", "provincecode": "340000", "city": "\u5408\u80a5\u5e02", "code": "340100", "initial": "H" }, { "id": "101", "provincecode": "340000", "city": "\u6dee\u5357\u5e02", "code": "340400", "initial": "H" }, { "id": "103", "provincecode": "340000", "city": "\u6dee\u5317\u5e02", "code": "340600", "initial": "H" }, { "id": "106", "provincecode": "340000", "city": "\u9ec4\u5c71\u5e02", "code": "341000", "initial": "H" }, { "id": "112", "provincecode": "340000", "city": "\u4eb3\u5dde\u5e02", "code": "341600", "initial": "H" }, { "id": "151", "provincecode": "370000", "city": "\u8377\u6cfd\u5e02", "code": "371700", "initial": "H" }, { "id": "157", "provincecode": "410000", "city": "\u9e64\u58c1\u5e02", "code": "410600", "initial": "H" }, { "id": "170", "provincecode": "420000", "city": "\u9ec4\u77f3\u5e02", "code": "420200", "initial": "H" }, { "id": "178", "provincecode": "420000", "city": "\u9ec4\u5188\u5e02", "code": "421100", "initial": "H" }, { "id": "186", "provincecode": "430000", "city": "\u8861\u9633\u5e02", "code": "430400", "initial": "H" }, { "id": "194", "provincecode": "430000", "city": "\u6000\u5316\u5e02", "code": "431200", "initial": "H" }, { "id": "207", "provincecode": "440000", "city": "\u60e0\u5dde\u5e02", "code": "441300", "initial": "H" }, { "id": "210", "provincecode": "440000", "city": "\u6cb3\u6e90\u5e02", "code": "441600", "initial": "H" }, { "id": "228", "provincecode": "450000", "city": "\u8d3a\u5dde\u5e02", "code": "451100", "initial": "H" }, { "id": "229", "provincecode": "450000", "city": "\u6cb3\u6c60\u5e02", "code": "451200", "initial": "H" }, { "id": "232", "provincecode": "460000", "city": "\u6d77\u53e3\u5e02", "code": "460100", "initial": "H" }, { "id": "277", "provincecode": "530000", "city": "\u7ea2\u6cb3\u54c8\u5c3c\u65cf\u5f5d\u65cf\u81ea\u6cbb\u5dde", "code": "532500", "initial": "H" }, { "id": "297", "provincecode": "610000", "city": "\u6c49\u4e2d\u5e02", "code": "610700", "initial": "H" }, { "id": "316", "provincecode": "630000", "city": "\u6d77\u4e1c\u5730\u533a", "code": "632100", "initial": "H" }, { "id": "317", "provincecode": "630000", "city": "\u6d77\u5317\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "632200", "initial": "H" }, { "id": "318", "provincecode": "630000", "city": "\u9ec4\u5357\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "632300", "initial": "H" }, { "id": "319", "provincecode": "630000", "city": "\u6d77\u5357\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "632500", "initial": "H" }, { "id": "322", "provincecode": "630000", "city": "\u6d77\u897f\u8499\u53e4\u65cf\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "632800", "initial": "H" }, { "id": "331", "provincecode": "650000", "city": "\u54c8\u5bc6\u5730\u533a", "code": "652200", "initial": "H" }, { "id": "338", "provincecode": "650000", "city": "\u548c\u7530\u5730\u533a", "code": "653200", "initial": "H" }, { "id": "17", "provincecode": "140000", "city": "\u664b\u57ce\u5e02", "code": "140500", "initial": "J" }, { "id": "19", "provincecode": "140000", "city": "\u664b\u4e2d\u5e02", "code": "140700", "initial": "J" }, { "id": "42", "provincecode": "210000", "city": "\u9526\u5dde\u5e02", "code": "210700", "initial": "J" }, { "id": "51", "provincecode": "220000", "city": "\u5409\u6797\u5e02", "code": "220200", "initial": "J" }, { "id": "61", "provincecode": "230000", "city": "\u9e21\u897f\u5e02", "code": "230300", "initial": "J" }, { "id": "66", "provincecode": "230000", "city": "\u4f73\u6728\u65af\u5e02", "code": "230800", "initial": "J" }, { "id": "90", "provincecode": "330000", "city": "\u5609\u5174\u5e02", "code": "330400", "initial": "J" }, { "id": "93", "provincecode": "330000", "city": "\u91d1\u534e\u5e02", "code": "330700", "initial": "J" }, { "id": "125", "provincecode": "360000", "city": "\u666f\u5fb7\u9547\u5e02", "code": "360200", "initial": "J" }, { "id": "127", "provincecode": "360000", "city": "\u4e5d\u6c5f\u5e02", "code": "360400", "initial": "J" }, { "id": "131", "provincecode": "360000", "city": "\u5409\u5b89\u5e02", "code": "360800", "initial": "J" }, { "id": "135", "provincecode": "370000", "city": "\u6d4e\u5357\u5e02", "code": "370100", "initial": "J" }, { "id": "142", "provincecode": "370000", "city": "\u6d4e\u5b81\u5e02", "code": "370800", "initial": "J" }, { "id": "159", "provincecode": "410000", "city": "\u7126\u4f5c\u5e02", "code": "410800", "initial": "J" }, { "id": "175", "provincecode": "420000", "city": "\u8346\u95e8\u5e02", "code": "420800", "initial": "J" }, { "id": "177", "provincecode": "420000", "city": "\u8346\u5dde\u5e02", "code": "421000", "initial": "J" }, { "id": "203", "provincecode": "440000", "city": "\u6c5f\u95e8\u5e02", "code": "440700", "initial": "J" }, { "id": "216", "provincecode": "440000", "city": "\u63ed\u9633\u5e02", "code": "445200", "initial": "J" }, { "id": "302", "provincecode": "620000", "city": "\u5609\u5cea\u5173\u5e02", "code": "620200", "initial": "J" }, { "id": "303", "provincecode": "620000", "city": "\u91d1\u660c\u5e02", "code": "620300", "initial": "J" }, { "id": "309", "provincecode": "620000", "city": "\u9152\u6cc9\u5e02", "code": "620900", "initial": "J" }, { "id": "153", "provincecode": "410000", "city": "\u5f00\u5c01\u5e02", "code": "410200", "initial": "K" }, { "id": "268", "provincecode": "530000", "city": "\u6606\u660e\u5e02", "code": "530100", "initial": "K" }, { "id": "329", "provincecode": "650000", "city": "\u514b\u62c9\u739b\u4f9d\u5e02", "code": "650200", "initial": "K" }, { "id": "336", "provincecode": "650000", "city": "\u514b\u5b5c\u52d2\u82cf\u67ef\u5c14\u514b\u5b5c\u81ea\u6cbb\u5dde", "code": "653000", "initial": "K" }, { "id": "337", "provincecode": "650000", "city": "\u5580\u4ec0\u5730\u533a", "code": "653100", "initial": "K" }, { "id": "11", "provincecode": "130000", "city": "\u5eca\u574a\u5e02", "code": "131000", "initial": "L" }, { "id": "22", "provincecode": "140000", "city": "\u4e34\u6c7e\u5e02", "code": "141000", "initial": "L" }, { "id": "23", "provincecode": "140000", "city": "\u5415\u6881\u5e02", "code": "141100", "initial": "L" }, { "id": "45", "provincecode": "210000", "city": "\u8fbd\u9633\u5e02", "code": "211000", "initial": "L" }, { "id": "53", "provincecode": "220000", "city": "\u8fbd\u6e90\u5e02", "code": "220400", "initial": "L" }, { "id": "80", "provincecode": "320000", "city": "\u8fde\u4e91\u6e2f\u5e02", "code": "320700", "initial": "L" }, { "id": "97", "provincecode": "330000", "city": "\u4e3d\u6c34\u5e02", "code": "331100", "initial": "L" }, { "id": "111", "provincecode": "340000", "city": "\u516d\u5b89\u5e02", "code": "341500", "initial": "L" }, { "id": "122", "provincecode": "350000", "city": "\u9f99\u5ca9\u5e02", "code": "350800", "initial": "L" }, { "id": "146", "provincecode": "370000", "city": "\u83b1\u829c\u5e02", "code": "371200", "initial": "L" }, { "id": "147", "provincecode": "370000", "city": "\u4e34\u6c82\u5e02", "code": "371300", "initial": "L" }, { "id": "149", "provincecode": "370000", "city": "\u804a\u57ce\u5e02", "code": "371500", "initial": "L" }, { "id": "154", "provincecode": "410000", "city": "\u6d1b\u9633\u5e02", "code": "410300", "initial": "L" }, { "id": "162", "provincecode": "410000", "city": "\u6f2f\u6cb3\u5e02", "code": "411100", "initial": "L" }, { "id": "195", "provincecode": "430000", "city": "\u5a04\u5e95\u5e02", "code": "431300", "initial": "L" }, { "id": "219", "provincecode": "450000", "city": "\u67f3\u5dde\u5e02", "code": "450200", "initial": "L" }, { "id": "230", "provincecode": "450000", "city": "\u6765\u5bbe\u5e02", "code": "451300", "initial": "L" }, { "id": "241", "provincecode": "510000", "city": "\u6cf8\u5dde\u5e02", "code": "510500", "initial": "L" }, { "id": "247", "provincecode": "510000", "city": "\u4e50\u5c71\u5e02", "code": "511100", "initial": "L" }, { "id": "258", "provincecode": "510000", "city": "\u51c9\u5c71\u5f5d\u65cf\u81ea\u6cbb\u5dde", "code": "513400", "initial": "L" }, { "id": "260", "provincecode": "520000", "city": "\u516d\u76d8\u6c34\u5e02", "code": "520200", "initial": "L" }, { "id": "273", "provincecode": "530000", "city": "\u4e3d\u6c5f\u5e02", "code": "530700", "initial": "L" }, { "id": "275", "provincecode": "530000", "city": "\u4e34\u6ca7\u5e02", "code": "530900", "initial": "L" }, { "id": "284", "provincecode": "540000", "city": "\u62c9\u8428\u5e02", "code": "540100", "initial": "L" }, { "id": "290", "provincecode": "540000", "city": "\u6797\u829d\u5730\u533a", "code": "542600", "initial": "L" }, { "id": "301", "provincecode": "620000", "city": "\u5170\u5dde\u5e02", "code": "620100", "initial": "L" }, { "id": "312", "provincecode": "620000", "city": "\u9647\u5357\u5e02", "code": "621200", "initial": "L" }, { "id": "313", "provincecode": "620000", "city": "\u4e34\u590f\u56de\u65cf\u81ea\u6cbb\u5dde", "code": "622900", "initial": "L" }, { "id": "68", "provincecode": "230000", "city": "\u7261\u4e39\u6c5f\u5e02", "code": "231000", "initial": "M" }, { "id": "102", "provincecode": "340000", "city": "\u9a6c\u978d\u5c71\u5e02", "code": "340500", "initial": "M" }, { "id": "205", "provincecode": "440000", "city": "\u8302\u540d\u5e02", "code": "440900", "initial": "M" }, { "id": "208", "provincecode": "440000", "city": "\u6885\u5dde\u5e02", "code": "441400", "initial": "M" }, { "id": "243", "provincecode": "510000", "city": "\u7ef5\u9633\u5e02", "code": "510700", "initial": "M" }, { "id": "249", "provincecode": "510000", "city": "\u7709\u5c71\u5e02", "code": "511400", "initial": "M" }, { "id": "74", "provincecode": "320000", "city": "\u5357\u4eac\u5e02", "code": "320100", "initial": "N" }, { "id": "79", "provincecode": "320000", "city": "\u5357\u901a\u5e02", "code": "320600", "initial": "N" }, { "id": "88", "provincecode": "330000", "city": "\u5b81\u6ce2\u5e02", "code": "330200", "initial": "N" }, { "id": "121", "provincecode": "350000", "city": "\u5357\u5e73\u5e02", "code": "350700", "initial": "N" }, { "id": "123", "provincecode": "350000", "city": "\u5b81\u5fb7\u5e02", "code": "350900", "initial": "N" }, { "id": "124", "provincecode": "360000", "city": "\u5357\u660c\u5e02", "code": "360100", "initial": "N" }, { "id": "164", "provincecode": "410000", "city": "\u5357\u9633\u5e02", "code": "411300", "initial": "N" }, { "id": "218", "provincecode": "450000", "city": "\u5357\u5b81\u5e02", "code": "450100", "initial": "N" }, { "id": "246", "provincecode": "510000", "city": "\u5185\u6c5f\u5e02", "code": "511000", "initial": "N" }, { "id": "248", "provincecode": "510000", "city": "\u5357\u5145\u5e02", "code": "511300", "initial": "N" }, { "id": "282", "provincecode": "530000", "city": "\u6012\u6c5f\u5088\u50f3\u65cf\u81ea\u6cbb\u5dde", "code": "533300", "initial": "N" }, { "id": "288", "provincecode": "540000", "city": "\u90a3\u66f2\u5730\u533a", "code": "542400", "initial": "N" }, { "id": "46", "provincecode": "210000", "city": "\u76d8\u9526\u5e02", "code": "211100", "initial": "P" }, { "id": "117", "provincecode": "350000", "city": "\u8386\u7530\u5e02", "code": "350300", "initial": "P" }, { "id": "126", "provincecode": "360000", "city": "\u840d\u4e61\u5e02", "code": "360300", "initial": "P" }, { "id": "155", "provincecode": "410000", "city": "\u5e73\u9876\u5c71\u5e02", "code": "410400", "initial": "P" }, { "id": "160", "provincecode": "410000", "city": "\u6fee\u9633\u5e02", "code": "410900", "initial": "P" }, { "id": "240", "provincecode": "510000", "city": "\u6500\u679d\u82b1\u5e02", "code": "510400", "initial": "P" }, { "id": "308", "provincecode": "620000", "city": "\u5e73\u51c9\u5e02", "code": "620800", "initial": "P" }, { "id": "4", "provincecode": "130000", "city": "\u79e6\u7687\u5c9b\u5e02", "code": "130300", "initial": "Q" }, { "id": "60", "provincecode": "230000", "city": "\u9f50\u9f50\u54c8\u5c14\u5e02", "code": "230200", "initial": "Q" }, { "id": "67", "provincecode": "230000", "city": "\u4e03\u53f0\u6cb3\u5e02", "code": "230900", "initial": "Q" }, { "id": "94", "provincecode": "330000", "city": "\u8862\u5dde\u5e02", "code": "330800", "initial": "Q" }, { "id": "119", "provincecode": "350000", "city": "\u6cc9\u5dde\u5e02", "code": "350500", "initial": "Q" }, { "id": "136", "provincecode": "370000", "city": "\u9752\u5c9b\u5e02", "code": "370200", "initial": "Q" }, { "id": "212", "provincecode": "440000", "city": "\u6e05\u8fdc\u5e02", "code": "441800", "initial": "Q" }, { "id": "224", "provincecode": "450000", "city": "\u94a6\u5dde\u5e02", "code": "450700", "initial": "Q" }, { "id": "264", "provincecode": "520000", "city": "\u9ed4\u897f\u5357\u5e03\u4f9d\u65cf\u82d7\u65cf\u81ea\u6cbb\u5dde", "code": "522300", "initial": "Q" }, { "id": "266", "provincecode": "520000", "city": "\u9ed4\u4e1c\u5357\u82d7\u65cf\u4f97\u65cf\u81ea\u6cbb\u5dde", "code": "522600", "initial": "Q" }, { "id": "267", "provincecode": "520000", "city": "\u9ed4\u5357\u5e03\u4f9d\u65cf\u82d7\u65cf\u81ea\u6cbb\u5dde", "code": "522700", "initial": "Q" }, { "id": "269", "provincecode": "530000", "city": "\u66f2\u9756\u5e02", "code": "530300", "initial": "Q" }, { "id": "310", "provincecode": "620000", "city": "\u5e86\u9633\u5e02", "code": "621000", "initial": "Q" }, { "id": "145", "provincecode": "370000", "city": "\u65e5\u7167\u5e02", "code": "371100", "initial": "R" }, { "id": "287", "provincecode": "540000", "city": "\u65e5\u5580\u5219\u5730\u533a", "code": "542300", "initial": "R" }, { "id": "2", "provincecode": "130000", "city": "\u77f3\u5bb6\u5e84\u5e02", "code": "130100", "initial": "S" }, { "id": "18", "provincecode": "140000", "city": "\u6714\u5dde\u5e02", "code": "140600", "initial": "S" }, { "id": "36", "provincecode": "210000", "city": "\u6c88\u9633\u5e02", "code": "210100", "initial": "S" }, { "id": "52", "provincecode": "220000", "city": "\u56db\u5e73\u5e02", "code": "220300", "initial": "S" }, { "id": "56", "provincecode": "220000", "city": "\u677e\u539f\u5e02", "code": "220700", "initial": "S" }, { "id": "63", "provincecode": "230000", "city": "\u53cc\u9e2d\u5c71\u5e02", "code": "230500", "initial": "S" }, { "id": "70", "provincecode": "230000", "city": "\u7ee5\u5316\u5e02", "code": "231200", "initial": "S" }, { "id": "78", "provincecode": "320000", "city": "\u82cf\u5dde\u5e02", "code": "320500", "initial": "S" }, { "id": "86", "provincecode": "320000", "city": "\u5bbf\u8fc1\u5e02", "code": "321300", "initial": "S" }, { "id": "92", "provincecode": "330000", "city": "\u7ecd\u5174\u5e02", "code": "330600", "initial": "S" }, { "id": "109", "provincecode": "340000", "city": "\u5bbf\u5dde\u5e02", "code": "341300", "initial": "S" }, { "id": "118", "provincecode": "350000", "city": "\u4e09\u660e\u5e02", "code": "350400", "initial": "S" }, { "id": "134", "provincecode": "360000", "city": "\u4e0a\u9976\u5e02", "code": "361100", "initial": "S" }, { "id": "163", "provincecode": "410000", "city": "\u4e09\u95e8\u5ce1\u5e02", "code": "411200", "initial": "S" }, { "id": "165", "provincecode": "410000", "city": "\u5546\u4e18\u5e02", "code": "411400", "initial": "S" }, { "id": "171", "provincecode": "420000", "city": "\u5341\u5830\u5e02", "code": "420300", "initial": "S" }, { "id": "180", "provincecode": "420000", "city": "\u968f\u5dde\u5e02", "code": "421300", "initial": "S" }, { "id": "187", "provincecode": "430000", "city": "\u90b5\u9633\u5e02", "code": "430500", "initial": "S" }, { "id": "198", "provincecode": "440000", "city": "\u97f6\u5173\u5e02", "code": "440200", "initial": "S" }, { "id": "199", "provincecode": "440000", "city": "\u6df1\u5733\u5e02", "code": "440300", "initial": "S" }, { "id": "201", "provincecode": "440000", "city": "\u6c55\u5934\u5e02", "code": "440500", "initial": "S" }, { "id": "209", "provincecode": "440000", "city": "\u6c55\u5c3e\u5e02", "code": "441500", "initial": "S" }, { "id": "233", "provincecode": "460000", "city": "\u4e09\u4e9a\u5e02", "code": "460200", "initial": "S" }, { "id": "245", "provincecode": "510000", "city": "\u9042\u5b81\u5e02", "code": "510900", "initial": "S" }, { "id": "274", "provincecode": "530000", "city": "\u601d\u8305\u5e02", "code": "530800", "initial": "S" }, { "id": "286", "provincecode": "540000", "city": "\u5c71\u5357\u5730\u533a", "code": "542200", "initial": "S" }, { "id": "300", "provincecode": "610000", "city": "\u5546\u6d1b\u5e02", "code": "611000", "initial": "S" }, { "id": "324", "provincecode": "640000", "city": "\u77f3\u5634\u5c71\u5e02", "code": "640200", "initial": "S" }, { "id": "3", "provincecode": "130000", "city": "\u5510\u5c71\u5e02", "code": "130200", "initial": "T" }, { "id": "13", "provincecode": "140000", "city": "\u592a\u539f\u5e02", "code": "140100", "initial": "T" }, { "id": "28", "provincecode": "150000", "city": "\u901a\u8fbd\u5e02", "code": "150500", "initial": "T" }, { "id": "47", "provincecode": "210000", "city": "\u94c1\u5cad\u5e02", "code": "211200", "initial": "T" }, { "id": "54", "provincecode": "220000", "city": "\u901a\u5316\u5e02", "code": "220500", "initial": "T" }, { "id": "85", "provincecode": "320000", "city": "\u6cf0\u5dde\u5e02", "code": "321200", "initial": "T" }, { "id": "96", "provincecode": "330000", "city": "\u53f0\u5dde\u5e02", "code": "331000", "initial": "T" }, { "id": "104", "provincecode": "340000", "city": "\u94dc\u9675\u5e02", "code": "340700", "initial": "T" }, { "id": "143", "provincecode": "370000", "city": "\u6cf0\u5b89\u5e02", "code": "370900", "initial": "T" }, { "id": "263", "provincecode": "520000", "city": "\u94dc\u4ec1\u5730\u533a", "code": "522200", "initial": "T" }, { "id": "292", "provincecode": "610000", "city": "\u94dc\u5ddd\u5e02", "code": "610200", "initial": "T" }, { "id": "305", "provincecode": "620000", "city": "\u5929\u6c34\u5e02", "code": "620500", "initial": "T" }, { "id": "330", "provincecode": "650000", "city": "\u5410\u9c81\u756a\u5730\u533a", "code": "652100", "initial": "T" }, { "id": "340", "provincecode": "650000", "city": "\u5854\u57ce\u5730\u533a", "code": "654200", "initial": "T" }, { "id": "343", "provincecode": "120000", "city": "\u5929\u6d25\u5e02", "code": "120100", "initial": "T" }, { "id": "26", "provincecode": "150000", "city": "\u4e4c\u6d77\u5e02", "code": "150300", "initial": "W" }, { "id": "32", "provincecode": "150000", "city": "\u4e4c\u5170\u5bdf\u5e03\u5e02", "code": "150900", "initial": "W" }, { "id": "75", "provincecode": "320000", "city": "\u65e0\u9521\u5e02", "code": "320200", "initial": "W" }, { "id": "89", "provincecode": "330000", "city": "\u6e29\u5dde\u5e02", "code": "330300", "initial": "W" }, { "id": "99", "provincecode": "340000", "city": "\u829c\u6e56\u5e02", "code": "340200", "initial": "W" }, { "id": "141", "provincecode": "370000", "city": "\u6f4d\u574a\u5e02", "code": "370700", "initial": "W" }, { "id": "144", "provincecode": "370000", "city": "\u5a01\u6d77\u5e02", "code": "371000", "initial": "W" }, { "id": "169", "provincecode": "420000", "city": "\u6b66\u6c49\u5e02", "code": "420100", "initial": "W" }, { "id": "221", "provincecode": "450000", "city": "\u68a7\u5dde\u5e02", "code": "450400", "initial": "W" }, { "id": "278", "provincecode": "530000", "city": "\u6587\u5c71\u58ee\u65cf\u82d7\u65cf\u81ea\u6cbb\u5dde", "code": "532600", "initial": "W" }, { "id": "295", "provincecode": "610000", "city": "\u6e2d\u5357\u5e02", "code": "610500", "initial": "W" }, { "id": "306", "provincecode": "620000", "city": "\u6b66\u5a01\u5e02", "code": "620600", "initial": "W" }, { "id": "325", "provincecode": "640000", "city": "\u5434\u5fe0\u5e02", "code": "640300", "initial": "W" }, { "id": "328", "provincecode": "650000", "city": "\u4e4c\u9c81\u6728\u9f50\u5e02", "code": "650100", "initial": "W" }, { "id": "6", "provincecode": "130000", "city": "\u90a2\u53f0\u5e02", "code": "130500", "initial": "X" }, { "id": "21", "provincecode": "140000", "city": "\u5ffb\u5dde\u5e02", "code": "140900", "initial": "X" }, { "id": "33", "provincecode": "150000", "city": "\u5174\u5b89\u76df", "code": "152200", "initial": "X" }, { "id": "34", "provincecode": "150000", "city": "\u9521\u6797\u90ed\u52d2\u76df", "code": "152500", "initial": "X" }, { "id": "76", "provincecode": "320000", "city": "\u5f90\u5dde\u5e02", "code": "320300", "initial": "X" }, { "id": "114", "provincecode": "340000", "city": "\u5ba3\u57ce\u5e02", "code": "341800", "initial": "X" }, { "id": "116", "provincecode": "350000", "city": "\u53a6\u95e8\u5e02", "code": "350200", "initial": "X" }, { "id": "128", "provincecode": "360000", "city": "\u65b0\u4f59\u5e02", "code": "360500", "initial": "X" }, { "id": "158", "provincecode": "410000", "city": "\u65b0\u4e61\u5e02", "code": "410700", "initial": "X" }, { "id": "161", "provincecode": "410000", "city": "\u8bb8\u660c\u5e02", "code": "411000", "initial": "X" }, { "id": "166", "provincecode": "410000", "city": "\u4fe1\u9633\u5e02", "code": "411500", "initial": "X" }, { "id": "173", "provincecode": "420000", "city": "\u8944\u6a0a\u5e02", "code": "420600", "initial": "X" }, { "id": "176", "provincecode": "420000", "city": "\u5b5d\u611f\u5e02", "code": "420900", "initial": "X" }, { "id": "179", "provincecode": "420000", "city": "\u54b8\u5b81\u5e02", "code": "421200", "initial": "X" }, { "id": "185", "provincecode": "430000", "city": "\u6e58\u6f6d\u5e02", "code": "430300", "initial": "X" }, { "id": "196", "provincecode": "430000", "city": "\u6e58\u897f\u571f\u5bb6\u65cf\u82d7\u65cf\u81ea\u6cbb\u5dde", "code": "433100", "initial": "X" }, { "id": "279", "provincecode": "530000", "city": "\u897f\u53cc\u7248\u7eb3\u50a3\u65cf\u81ea\u6cbb\u5dde", "code": "532800", "initial": "X" }, { "id": "291", "provincecode": "610000", "city": "\u897f\u5b89\u5e02", "code": "610100", "initial": "X" }, { "id": "294", "provincecode": "610000", "city": "\u54b8\u9633\u5e02", "code": "610400", "initial": "X" }, { "id": "315", "provincecode": "630000", "city": "\u897f\u5b81\u5e02", "code": "630100", "initial": "X" }, { "id": "15", "provincecode": "140000", "city": "\u9633\u6cc9\u5e02", "code": "140300", "initial": "Y" }, { "id": "20", "provincecode": "140000", "city": "\u8fd0\u57ce\u5e02", "code": "140800", "initial": "Y" }, { "id": "43", "provincecode": "210000", "city": "\u8425\u53e3\u5e02", "code": "210800", "initial": "Y" }, { "id": "58", "provincecode": "220000", "city": "\u5ef6\u8fb9\u671d\u9c9c\u65cf\u81ea\u6cbb\u5dde", "code": "222400", "initial": "Y" }, { "id": "65", "provincecode": "230000", "city": "\u4f0a\u6625\u5e02", "code": "230700", "initial": "Y" }, { "id": "82", "provincecode": "320000", "city": "\u76d0\u57ce\u5e02", "code": "320900", "initial": "Y" }, { "id": "83", "provincecode": "320000", "city": "\u626c\u5dde\u5e02", "code": "321000", "initial": "Y" }, { "id": "129", "provincecode": "360000", "city": "\u9e70\u6f6d\u5e02", "code": "360600", "initial": "Y" }, { "id": "132", "provincecode": "360000", "city": "\u5b9c\u6625\u5e02", "code": "360900", "initial": "Y" }, { "id": "140", "provincecode": "370000", "city": "\u70df\u53f0\u5e02", "code": "370600", "initial": "Y" }, { "id": "172", "provincecode": "420000", "city": "\u5b9c\u660c\u5e02", "code": "420500", "initial": "Y" }, { "id": "188", "provincecode": "430000", "city": "\u5cb3\u9633\u5e02", "code": "430600", "initial": "Y" }, { "id": "191", "provincecode": "430000", "city": "\u76ca\u9633\u5e02", "code": "430900", "initial": "Y" }, { "id": "193", "provincecode": "430000", "city": "\u6c38\u5dde\u5e02", "code": "431100", "initial": "Y" }, { "id": "211", "provincecode": "440000", "city": "\u9633\u6c5f\u5e02", "code": "441700", "initial": "Y" }, { "id": "217", "provincecode": "440000", "city": "\u4e91\u6d6e\u5e02", "code": "445300", "initial": "Y" }, { "id": "226", "provincecode": "450000", "city": "\u7389\u6797\u5e02", "code": "450900", "initial": "Y" }, { "id": "250", "provincecode": "510000", "city": "\u5b9c\u5bbe\u5e02", "code": "511500", "initial": "Y" }, { "id": "253", "provincecode": "510000", "city": "\u96c5\u5b89\u5e02", "code": "511800", "initial": "Y" }, { "id": "270", "provincecode": "530000", "city": "\u7389\u6eaa\u5e02", "code": "530400", "initial": "Y" }, { "id": "296", "provincecode": "610000", "city": "\u5ef6\u5b89\u5e02", "code": "610600", "initial": "Y" }, { "id": "298", "provincecode": "610000", "city": "\u6986\u6797\u5e02", "code": "610800", "initial": "Y" }, { "id": "321", "provincecode": "630000", "city": "\u7389\u6811\u85cf\u65cf\u81ea\u6cbb\u5dde", "code": "632700", "initial": "Y" }, { "id": "323", "provincecode": "640000", "city": "\u94f6\u5ddd\u5e02", "code": "640100", "initial": "Y" }, { "id": "339", "provincecode": "650000", "city": "\u4f0a\u7281\u54c8\u8428\u514b\u81ea\u6cbb\u5dde", "code": "654000", "initial": "Y" }, { "id": "8", "provincecode": "130000", "city": "\u5f20\u5bb6\u53e3\u5e02", "code": "130700", "initial": "Z" }, { "id": "84", "provincecode": "320000", "city": "\u9547\u6c5f\u5e02", "code": "321100", "initial": "Z" }, { "id": "95", "provincecode": "330000", "city": "\u821f\u5c71\u5e02", "code": "330900", "initial": "Z" }, { "id": "120", "provincecode": "350000", "city": "\u6f33\u5dde\u5e02", "code": "350600", "initial": "Z" }, { "id": "137", "provincecode": "370000", "city": "\u6dc4\u535a\u5e02", "code": "370300", "initial": "Z" }, { "id": "138", "provincecode": "370000", "city": "\u67a3\u5e84\u5e02", "code": "370400", "initial": "Z" }, { "id": "152", "provincecode": "410000", "city": "\u90d1\u5dde\u5e02", "code": "410100", "initial": "Z" }, { "id": "167", "provincecode": "410000", "city": "\u5468\u53e3\u5e02", "code": "411600", "initial": "Z" }, { "id": "168", "provincecode": "410000", "city": "\u9a7b\u9a6c\u5e97\u5e02", "code": "411700", "initial": "Z" }, { "id": "184", "provincecode": "430000", "city": "\u682a\u6d32\u5e02", "code": "430200", "initial": "Z" }, { "id": "190", "provincecode": "430000", "city": "\u5f20\u5bb6\u754c\u5e02", "code": "430800", "initial": "Z" }, { "id": "200", "provincecode": "440000", "city": "\u73e0\u6d77\u5e02", "code": "440400", "initial": "Z" }, { "id": "204", "provincecode": "440000", "city": "\u6e5b\u6c5f\u5e02", "code": "440800", "initial": "Z" }, { "id": "206", "provincecode": "440000", "city": "\u8087\u5e86\u5e02", "code": "441200", "initial": "Z" }, { "id": "214", "provincecode": "440000", "city": "\u4e2d\u5c71\u5e02", "code": "442000", "initial": "Z" }, { "id": "239", "provincecode": "510000", "city": "\u81ea\u8d21\u5e02", "code": "510300", "initial": "Z" }, { "id": "255", "provincecode": "510000", "city": "\u8d44\u9633\u5e02", "code": "512000", "initial": "Z" }, { "id": "261", "provincecode": "520000", "city": "\u9075\u4e49\u5e02", "code": "520300", "initial": "Z" }, { "id": "272", "provincecode": "530000", "city": "\u662d\u901a\u5e02", "code": "530600", "initial": "Z" }, { "id": "307", "provincecode": "620000", "city": "\u5f20\u6396\u5e02", "code": "620700", "initial": "Z" }, { "id": "327", "provincecode": "640000", "city": "\u4e2d\u536b\u5e02", "code": "640500", "initial": "Z" }]

//检索的首字母
var searchLetter = ["*", "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]

mod=viewthread&tid=1644&extra=page%3D1
function searchLetter() {
  return searchLetter;
}

//对城市信息进行分组
function cityList() {

  var tempObj = [];
  for (var i = 0; i < searchLetter.length; i++) {
    var initial = searchLetter[i];
    var cityInfo = [];
    var tempArr = {};
    tempArr.initial = initial;
    for (var j = 0; j < cityObj.length; j++) {
      if (initial == cityObj[j].initial) {
        cityInfo.push(cityObj[j]);
      }
    }
    tempArr.cityInfo = cityInfo;
    tempObj.push(tempArr);
  }
  return tempObj;
}

function pushCity() {

}

module.exports = {
  searchLetter: searchLetter,
  cityList: cityList
}

先看效果图

注意：

我这里是初始化加载出第一层的数据，

点击第一层的品牌出现第二层的数据并显示，

点击第二层的数据列表[隐藏第二层数据]显示第三层数据，


//WXML:



<view>



<view class="searchLetter touchClass">



<view wx:for="{{searchLetter}}" style="height:{{itemH}}px" wx:key="index" data-letter="{{item.name}}" catchtouchstart="searchStart" catchtouchmove="searchMove" catchtouchend="searchEnd">{{item.name}}</view>

</view>



<block wx:if="{{isShowLetter}}">

<view class="showSlectedLetter">

{{showLetter}}

</view>

</block>

<!--一级品牌 -->

<scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" scroll-top="{{scrollTop}}">

<view class="selection" wx:for="{{cityList}}" wx:key="{{item.shou_zm}}">

<view class="item_letter">{{item.shou_zm}}</view>

<view class="item_city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-city="{{ct.brand}}" bindtap="btn_pinpai">

<!-- <image class='car_img' src='{{ct.images}}' bindtap='btn_close'></image> -->

<!-- <label class='car_name'>{{ct.city}}</label> -->

{{ct.brand}}

</view>

</view>

</scroll-view>

<!--二级车系 -->

<scroll-view style='' scroll-y="true" style="height:{{car_type_hight}};display:{{two_none}}" class='scoll_car_service' >

<view class="selection" wx:for="{{car_series}}" wx:key="{{item.vender}}">

<view class="item_letter">{{item.vender}}</view>

<label class='tab2' wx:for="{{item.car_series}}"wx:key="{{item.car_series}}" wx:for-item="item" bindtap='btn_name' data-item='{{item.car_series}}' >

{{item.car_series}}

</label>

</view>

</scroll-view>

<!--三级 -->

<scroll-view scroll-y="true" style="height:{{car_type_hight}};display:{{three_none}}" class='scoll_vender_service' >

<view wx:for="{{car_vend_ser}}" wx:key="key">

<!-- <view class="item_letter">{{item.vender}}</view> -->

<text class='tab3' bindtap='btn_sel_name' data-item='{{item}}'>{{item}}</text>

</view>

</scroll-view>

</view>

//CSS:



.searchLetter{

position: fixed;

right: 0;

width: 40px;

height: 100%;

text-align: center;

justify-content: center;

display: flex;

flex-direction: column;

color: #666;

z-index: 1

}



/*二级车系 */

.tab2{

width: 560rpx;

height: 70rpx;

color: #2a2a2a;

font-size: 30rpx;

line-height: 70rpx;

border-bottom: 1px solid #EAEAEA;

padding-left: 30rpx;

}

.tab3{

height: 70rpx;

color: #2a2a2a;

font-size: 30rpx;

line-height: 70rpx;

border-bottom: 1px solid #EAEAEA;

padding-left: 30rpx;

display: block;

overflow: hidden;

white-space: nowrap;

text-overflow:ellipsis;

}

/*二级内容 */

.scoll_car_service{

display: flex;

position: fixed;

top: 1px;

left: 30%;

z-index: 5;

width: 70%;

height: 100%;

box-shadow: 0px 0px 3px 3px #999;

background-color: #f5f5f5;

}

.scoll_vender_service{

display: flex;

position: fixed;

top: 1px;

left: 30%;

z-index: 10;

width: 70%;

height: 100%;

box-shadow: 0px 0px 3px 3px #999;

background-color: #f5f5f5;

}

.searchLetter view{

height: 70rpx;

}

.touchClass{

/* background-color: rgba(0, 0, 0,0.5); */

color: #A56E0A;

font-size: 28rpx;

}

.showSlectedLetter{

background-color: rgba(0, 0, 0,0.5);

color: #fff;

display: flex;

justify-content: center;

align-items: center;

position: fixed;

top:50%;

left: 50%;

margin: -50px;

width: 100px;

height: 100px;

border-radius:10px;

font-size: 26px;

z-index: 1

}

.selection{

display: flex;

width: 100%;

flex-direction: column;

}

.item_letter{

display: flex;

background-color: #f8f8f8;

/* border-bottom: 1px solid red; */

height: 30px;

color: #896A0D;

font-size: 26rpx;

padding-left: 10px;

align-items: center;

}

.item_city{

background-color: #f5f5f5;

height: 40px;

line-height: 40px;

padding-left: 10px;

color: #2a2a2a;

font-size: 30rpx;

/* align-items: center; */

border-bottom: 1px solid #EAEAEA;

}



.car_img{

width: 100rpx;

height: 80rpx;

}

/* .car_name{

position: absolute;

left: 150rpx;

} */

//JS



Page({



data: {

searchLetter: [],

showLetter: "",

winHeight: 0,

tHeight: 0,

bHeight: 0,

startPageY: 0,

cityList: [],

isShowLetter: false,

scrollTop: 0,

three_none: "none",

two_none: "none",

// 二级

car_series: [],

// 获取到二级当前记录下来的值

car_ser: null,

//城市检索的首字母

searchLetter: ["*", "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],

// 三级

car_vend_ser: [],

cityObj: []

},

shuju: {

car_name: []

},

car_pinpai: {

pinpai: null

},

onLoad: function () {

// 生命周期函数--监听页面加载

var that = this;

wx.request({

method: "post",

url: '请求第一层的接口',

success: function (e) {

that.data.cityObj = e.data.data.data;



wx.setStorageSync("key", that.data.cityObj);

}

})

that.shuju.car_name = wx.getStorageSync("key");

console.log(that.shuju.car_name);

var searchLetter = that.data.searchLetter;

var cityList = that.cityList();

console.log(cityList);

var sysInfo = wx.getSystemInfoSync();

// console.log(sysInfo);

var winHeight = sysInfo.windowHeight;



//添加要匹配的字母范围值

//1、更加屏幕高度设置子元素的高度

var itemH = winHeight / searchLetter.length;

var tempObj = [];

for (var i = 0; i < searchLetter.length; i++) {

var temp = {};

temp.name = searchLetter[i];

temp.tHeight = i * itemH;

temp.bHeight = (i + 1) * itemH;



tempObj.push(temp)

}



that.setData({

winHeight: winHeight,

itemH: itemH,

searchLetter: tempObj,

cityList: cityList

})



},



onShareAppMessage: function () {

// 用户点击右上角分享

return {

title: 'title', // 分享标题

desc: 'desc', // 分享描述

path: 'path' // 分享路径

}

},

searchStart: function (e) {

var showLetter = e.currentTarget.dataset.letter;

var pageY = e.touches[0].pageY;

this.setScrollTop(this, showLetter);

this.nowLetter(pageY, this);

this.setData({

showLetter: showLetter,

startPageY: pageY,

isShowLetter: true,

})

},

searchMove: function (e) {

var pageY = e.touches[0].pageY;

var startPageY = this.data.startPageY;

var tHeight = this.data.tHeight;

var bHeight = this.data.bHeight;

var showLetter = 0;

console.log(pageY);

if (startPageY - pageY > 0) { //向上移动

if (pageY < tHeight) {

// showLetter=this.mateLetter(pageY,this);

this.nowLetter(pageY, this);

}

} else {//向下移动

if (pageY > bHeight) {

// showLetter=this.mateLetter(pageY,this);

this.nowLetter(pageY, this);

}

}

},

searchEnd: function (e) {

// console.log(e);

// var showLetter=e.currentTarget.dataset.letter;

var that = this;

setTimeout(function () {

that.setData({

isShowLetter: false

})

}, 1000)



},

nowLetter: function (pageY, that) {//当前选中的信息

var letterData = this.data.searchLetter;

var bHeight = 0;

var tHeight = 0;

var showLetter = "";

for (var i = 0; i < letterData.length; i++) {

if (letterData[i].tHeight <= pageY && pageY <= letterData[i].bHeight) {

bHeight = letterData[i].bHeight;

tHeight = letterData[i].tHeight;

showLetter = letterData[i].name;

break;

}

}



this.setScrollTop(that, showLetter);



that.setData({

bHeight: bHeight,

tHeight: tHeight,

showLetter: showLetter,

startPageY: pageY

})

},

bindScroll: function (e) {

console.log(e.detail)

},

setScrollTop: function (that, showLetter) {

var scrollTop = 0;

var cityList = that.data.cityList;

var cityCount = 0;

var initialCount = 0;

for (var i = 0; i < cityList.length; i++) {

if (showLetter == cityList[i].shou_zm) {

scrollTop = initialCount * 30 + cityCount * 41;

break;

} else {

initialCount++;

cityCount += cityList[i].cityInfo.length;

}

}



that.setData({

scrollTop: scrollTop

})

},

xz: function () {

this.setData({

zrf: "block"



})

},

// 这里点击一级品牌获取第二层数据

btn_pinpai: function (e) {

var that = this;



that.car_pinpai.pinpai = e.currentTarget.dataset.city;

console.log(that.car_pinpai.pinpai);



wx.request({

url: '请求第二层的接口',

method: "post",

data: {

brand: that.car_pinpai.pinpai

},

success: function (data) {

console.log(data.data.data);

that.data.car_series = data.data.data.data;



that.setData({

three_none: "none",

two_none: "block",

car_series: that.data.car_series

})

}

})

// wx.reLaunch({

// url: "../car_shop/car_shop?pinpai=" + pinpai

// })



},

// 点击二级车系获取第三层数据

btn_name: function (e) {

var that = this;

that.data.car_ser = e.currentTarget.dataset.item;

console.log(that.car_pinpai.pinpai);



wx.request({

url: '请求第三层的数据接口',

method: 'post',

data: {

brand: that.car_pinpai.pinpai,

car_series: that.data.car_ser

},

success: function (res) {

console.log(res.data.data.data);

that.setData({

two_none: "none",

three_none: "block",

car_vend_ser: res.data.data.data

})

},

fail: function (res) { },

complete: function (res) { },

})

},

// 点击三级title传值跳转页面

btn_sel_name: function (e) {

var that = this;

var sel_name = e.currentTarget.dataset.item;

console.log(that.car_pinpai.pinpai);

console.log(that.data.car_ser);



var model = that.car_pinpai.pinpai.concat(that.data.car_ser, sel_name);

console.log(model);

wx.redirectTo({

url: '../daiban/daiban?model=' + model,

})

},

cityList: function () {

var that = this;

var searchLetter = that.data.searchLetter;

var tempObj = [];

for (var i = 0; i < searchLetter.length; i++) {

var shou_zm = searchLetter[i];

var cityInfo = [];

var tempArr = {};

tempArr.shou_zm = shou_zm;

for (var j = 0; j < that.shuju.car_name.length; j++) {

if (shou_zm == that.shuju.car_name[j].shou_zm) {

cityInfo.push(that.shuju.car_name[j]);

}

}

tempArr.cityInfo = cityInfo;

tempObj.push(tempArr);

}

return tempObj;

},

searchLetter: function () {

return searchLetter;

}

})