小程序锚点跳转（字母滚动到相关城市楼层）

最新推荐文章于 2022-04-26 17:54:12 发布
最新推荐文章于 2022-04-26 17:54:12 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序锚点跳转 字母滚动到相关城市楼层
原文链接：https://blog.csdn.net/m0_37865510/article/details/103289556?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-3.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-3.nonecase
版权

城市快捷导航，可以点击触发，也可以触摸（手指在快捷导航从上往下连着往下触摸移动，导航跟着变动）

1.util.js

var cityObj = [{ "id": "35", "provincecode": "150000", "city": "\u963f\u62c9\u5584\u76df", "code": "152900", "initial": "A" }, { "id": "38", "provincecode": "210000", "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": "", "provincecode": "500000", "city": "\u91cd\u5e86\u5e02", "code": "500000", "initial": "C" }, { "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": "", "provincecode": "310000", "city": "\u4e0a\u6d77\u5e02", "code": "310100", "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"];

// 处理字母列表，插入热门城市
function get_kjList() {
    var searchLetter_new = searchLetter.slice();
    searchLetter_new.unshift('热门城市');
    var arr = [];
    for (var i = 0; i < searchLetter_new.length; i++) {
        arr.push({
            'key': searchLetter_new[i]
        })
    }
    return arr;
}

//对城市信息进行分组
function get_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;
}

module.exports = {
    searchLetter: searchLetter,
    get_cityList: get_cityList,
    get_kjList: get_kjList
}

 

2.wxml

<!-- 右侧侧快捷导航 -->
<view class="slidebar" bindtouchstart="_onTouchStart" bindtouchmove="_onTouchMove" bindtouchend="_onTouchEnd">
	<view wx:for="{{kj_list}}" wx:key='item' class="slidebar-item {{item.selected ? 'on' : ''}}" id="item-{{index}}">
		{{item.key}}
	</view>
</view>

<!-- 导航选中提示 -->
<view class="mask_log" hidden="{{!toggle_toast}}">
	{{kj_list[kj_index].key}}
</view>

<!-- 内容区域 -->
<scroll-view scroll-y="true" style="height:{{win_height}}px" bindscroll="bindScroll" scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">
	<view class="title-common">当前选择城市</view>
	<view class="select-name">{{city_name}}</view>
	<view>
		<text class="title-common">热门城市</text>
		<!-- 热门城市列表 -->
		<view class="hot-list">
			<block wx:for-items="{{hotcity_list}}" wx:key="item">
				<view class="hot-li" data-cityCode="{{item.cityCode}}" data-city="{{item.city}}" data-type='hot' bindtap="choose_city">
					<view class="hot-li-label">{{item.city}}</view>
				</view>
			</block>
		</view>
	</view>
	<!-- 城市列表 -->
	<view class="city-list" wx:for="{{city_list}}" wx:key="item">
		<view class="city-li-letter" id="{{item.initial}}">{{item.initial}}</view>
		<view class="city-li" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="ct" data-cityCode="{{ct.code}}" data-city="{{ct.city}}" data-type='normal' bindtap="choose_city">
			{{ct.city}}
		</view>
	</view>
</scroll-view>

3.wxss

/* 右侧导航 */
.slidebar{
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  right: 0;
  width: 50rpx;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #666;
  z-index: 1;
  border-radius: 50rpx;
  overflow: hidden;
}
.slidebar .slidebar-item{
  margin-top: 10rpx;
  color:#2ab4ff;
  font-size:20rpx;
  width: 50rpx;
}
.slidebar .slidebar-item:first-child{
  margin-top: 0;
  padding-top: 10rpx;
}
.slidebar .slidebar-item:last-child{
  padding-bottom: 10rpx;
}
.slidebar .slidebar-item.on{
  font-weight: 500;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10rpx;
}

/* 导航选中提示 */
.mask_log{
  position: absolute;
  top: 50%;
  margin-top: -180rpx;
  left: 50%;
  margin-left: -175rpx;
  width: 350rpx;
  height: 250rpx;
  text-align: center;
  font-size: 72rpx;
  line-height: 250rpx;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 15%;
  z-index: 999;
}

/* 选中的城市展示 */
.select-name {
  display: inline-block;
  border: 1rpx solid #2ab4ff;
  border-radius: 8rpx;
  padding: 10rpx 10px;
  font-size: 24rpx;
  color: #2ab4ff;
  text-align: center;
  min-width: 149.5rpx;
  margin: 20rpx 0 20rpx 30rpx;
}

.title-common {
  font-size: 24rpx;
  color: #666;
  padding: 0 0 0 30rpx;
}

/* 热门城市 */

.hot-li {
  position: relative;
  float: left;
  padding: 10rpx 0;
  width: 149.5rpx;
  box-sizing: border-box;
  border: 1rpx solid #ececec;
  border-radius: 8rpx;
  margin: 10rpx 12rpx;
}
 
.hot-li-label {
  display: block;
  text-align: center;
  color: #333;
  font-size: 24rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 城市列表 */

.city-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 10rpx;
}

.city-li-letter {
  display: flex;
  background-color: #f5f5f5;
  height: 40rpx;
  padding-left: 34rpx;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.city-li {
  display: flex;
  background-color: #fff;
  height: 100rpx;
  padding-left: 34rpx;
  align-items: center;
  border-bottom: 1rpx solid #ededed;
  font-size: 24rpx;
  color: #666;
}

4.js

var city = require('../../utils/util.js');
Page({
  data: {
    // 快捷导航-列表
    kj_list: [],
    // 快捷导航-选中的index
    kj_index: -1,
    // 展示/隐藏 toast
    toggle_toast: false,
    // 城市列表
    city_list: [],
    // 获取窗口的高度
    win_height: 0,
    // 置顶高度
    scrollTop: 0,
    // 置顶id
    scrollTopId: '',
    // 选中的城市
    city_name: "上海市",
    // 热门城市列表
    hotcity_list: [{ cityCode: 110000, city: '北京市' }, { cityCode: 310000, city: '上海市' }, { cityCode: 440100, city: '广州市' }, { cityCode: 440300, city: '深圳市' }, { cityCode: 330100, city: '杭州市' }, { cityCode: 320100, city: '南京市' }, { cityCode: 420100, city: '武汉市' }, { cityCode: 410100, city: '郑州市' }, { cityCode: 120000, city: '天津市' }, { cityCode: 610100, city: '西安市' }, { cityCode: 510100, city: '成都市' }, { cityCode: 500000, city: '重庆市' }]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 处理 快捷导航，字母列表
    var kjList = city.get_kjList();
    that.setData({
      kj_list: kjList
    }, () => {
      that.isTouch = false;
      // 获取位置信息
      that.data.kj_list.forEach((d, i) => {
        that._wxQueryElementInfo("#item-" + i).then(res => {
          d.top = res[0].top;
          d.left = res[0].left;
          d.height = res[0].height;
          d.width = res[0].width;
        });
      });
    });
    // 获取城市列表
    var city_list = city.get_cityList();
    var win_height = wx.getSystemInfoSync().windowHeight;
    that.setData({
      win_height: win_height,
      city_list: city_list
    });
  },
  /**
   * 手指触摸快捷导航列表
   * **/
  _onTouchStart: function (e) {
    var that = this;
    that.isTouch = true;
    // 展示选中字母
    that.setData({
      toggle_toast: true
    });
    that._markSlideItemSeleted(e.touches[0].clientY);
  },
  _onTouchMove: function (e) {
    this._markSlideItemSeleted(e.touches[0].clientY);
  },
  _onTouchEnd: function (e) {
    var that = this;
    that.isTouch = false;
    // 隐藏选中字母
    setTimeout(function () {
      that.setData({
        toggle_toast: false
      });
    }, 1000);
  },
  // 根据y的位置标记SlideItem的selected状态
  _markSlideItemSeleted: function (y) {
    for (var i = 0; i < this.data.kj_list.length; i++) {
      var d = this.data.kj_list[i];
      if (y >= d.top && y <= d.top + d.height) {
        if (this.data.kj_index == i) {
          return;
        }
        this._setSlideItemSelectStatus(d, i);
        console.log("当前选中=>" + d.key);
        return;
      }
    }
  },
  _setSlideItemSelectStatus(d, i) {
    d.selected = true;
    if (this.data.kj_index != -1) {
      this.data.kj_list[this.data.kj_index].selected = false;
    }
    // 得到当前选中的index；同时改变选中的展示状态
    this.setData({
      kj_list: this.data.kj_list,
      kj_index: i
    });

    // 热门城市：返回顶部；（第一个为热门城市）
    // 其他城市：锚点跳转到指定楼层
    if (this.data.kj_index > 0) {
      this.setData({
        scrollTopId: d.key,
      });
    } else if (this.data.kj_index == 0) {
      this.setData({
        scrollTop: 0,
      });
    } else {}
  },
  // 选择城市
  choose_city(event) {
    var type = event.currentTarget.dataset.type;
    if (type == 'hot') {
      console.log('热门城市：', event.currentTarget.dataset.city)
    } else if (type == 'normal') {
      console.log('普通城市：', event.currentTarget.dataset.city)
    } else {}
    this.setData({
      city_name: event.currentTarget.dataset.city
    });
  },
  // 获取元素位置信息
  _wxQueryElementInfo: function (selector) {
    return new Promise((resolve, reject) => {
      var query = wx.createSelectorQuery().in(this);
      query.select(selector).boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec(function (res) {
        resolve(res);
      });
    });
  }
})

5.效果

6.说明：

6.1结合这两个案例改的，该案例没有手指连续按着滑动：

https://blog.csdn.net/m0_37865510/article/details/103289556?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-3.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-3.nonecase

6.2 https://blog.csdn.net/hangGe0111/article/details/96478653

 

hangGe0111
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序scroll-view锚点链接滚动跳转功能
01-19
html <view bindtap='jumpTo' wx:for={{keys}} data-item={{item}}>{{item}} <view wx:for={{data}} id={{item.key}}> {{item.name}} <
微信小程序 页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功
qq_42839746的博客
06-12 1045
微信小程序 页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功
小程序选择城市及右边字母滚动提示
开发路上的AZhe
07-23 955
页面： <view class="zeigai" tt:if="{{zeigaiStrat}}" bindtap="hiddenView" > <view class="backGroundColor"> <view class="showtitle flex-end"> <view class="title">选择国家地区</view> <view> <image src="取消的小icon" st..
小程序实现点击右侧字母跳至城市列表（类似通讯录效果）
xioxi
05-29 1051
代码： *.wxml <!--index.wxml--> <view class="page"> <view class="content"> <!-- 左侧内容区 --> <scroll-view class="person-list" enable-back-to-top style="height: {{oHeight}}px" scroll-into-view="{{toView}}" scroll-y=.
一个简单的jquery省级联动插件
wangcuiling_123的博客
07-03 4044
由于项目需要实现省级联动的效果，于是找了个简单的插件，需求基本都可以实现 一、 先保存地区数据文件 命名为areaData.js/**  * 保存地区信息  * 数据格式  * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}]  * 直辖市存在-1，表示就是直辖市  */ (function(window) {
微信小程序锚点定位楼层跳跃
wy_Blog的博客
05-16 4534
微信小程序实现楼层锚点跳跃，点击不同的锚点进行位置跳跃： 利用：scroll-into-view 来实现 效果图如下： WXML: {{item.region}} {{item.name}} 自动定位 {{item.region}} WXSS: page{ h
小程序实现锚点跳转
qq_45737165的博客
09-06 957
微信小程序之锚点跳转 最近在学微信小程序制作，照着微信联系人页面做的时候其他的都没有太大问题，但是微信联系人右侧有类似于锚点跳转的模块儿，当时不知道该怎么做，页就知道时锚点跳转，一开始想的是把每个字母都给上id然后用if语句判断实现跳转，可事情不顺利一直都拿不上id的值，当我去百度的时候慢慢的才懂了。 <scroll-view scroll-y style="height: {{height}}px" scroll-into-view="{{toView}}" class="all"> //在这
Vue从一个页面跳转到另一个页面指定位置
qq_44308109的博客
02-02 9177
Vue从一个页面跳转到另一个页面指定位置（跨页面锚点定位）) 从A页面跳转到B页面的boxCenter位置 1. B页面，在需要跳转到的指定位置添加id名（eg： id=‘boxCenter’） 2. A页面，添加点击方法 第一个参数为B页面路由地址，第二个参数为要跳转到的位置 3. A页面下toguid方法 methods:{ toguid(path,id){ var path=path var Id=id; localStorage.setItem('toId',Id); this
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
有很多的注意事项,如果你不注意,滚动效果真的真的粗不来~~ html中 scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
微信小程序实现超链接锚点跳转
04-04
微信小程序实现超链接锚点跳转
微信小程序实现锚点定位楼层跳跃的实例
08-30
主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料,需要的朋友可以参考下
微信小程序怎么让页面一进入就滑动到指定的位置，有没有类似a标签的锚点属性，点击直接跳到锚点位置呢？
weixin_45463061的博客
02-22 410
微信小程序怎么让页面滑动到指定的位置，有没有类似a标签的锚点属性，点击直接跳到锚点位置呢？ 小程序是有这个锚点的属性的，只是官方的文档写的不太清楚。以下是一进入页面就跳到评论点赞部分的代码 <!-- 评论收藏点赞部分 --> <view id="comment-like-area"> <view>...</view> </view> onReady() { this.pageScrollToBottom(); }, page
微信小程序 - 实现页面跳转，跳转到指定锚点位置
博客
07-25 2874
在index.wxml页面创建跳转按钮 <!-- index.wxml --> <view class="btn" bindtap="jump" data-detail="detail0" > 跳到 detail0 锚点位置 </view> <view class="btn" bindtap="jump" data-detail="detail1" > 跳到 detail1 锚点位置</view> <view class="b...
小程序实现锚点效果
yang_da_da的博客
12-08 3215
效果 1.点击tab页跳转至当前锚点内容 2.滚动页面时tab标签自动切换至当前tab 实现 1.wxml 使用scroll-view组件，顶部和内容都设成可滚动的区域 extraHeight是接下来要计算的额外高度，使点击到最后一个tab页时，内容可以在顶部 <view style="height :{{extraHeight}}px"></view> <view class="container"> <scroll-view scroll-x class
微信小程序 scroll-view 实现锚点，点击跳到指定页面（位置）
qq_37172200的博客
03-22 4833
微信小程序点击 tab 导航栏，滑动到对应的栏目内容位置，这也是常用的功能。 效果图： 用到的标签是. 用户点击导航标签，触发函数，bindtap=‘jumpTo’，去setdata .标签的 scroll-into-view="{{toViewid}}" ，从而实现滑动跳转。 代码如下： wxml: <view class="list"> <view class="...
【微信小程序】【项目实战】三、事件（点击事件）、路由跳转
m0_55546349的博客
04-26 2428
小程序框架介绍 注册页面 生命周期 页面路由 事件 一、 事件 什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如 id, dataset, touches。 事件分类 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。（eg:bindtap） 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。（eg
【微信小程序之页面跳转】从列表的item项跳转到下一个页面
热门推荐
晚秋星辰
01-15 2万+
很多项目都会有消息记录页，即列表页，紧接着就是点击列表的某一项进入到消息的详情页，本文承接上一篇博客，继续分享如何从列表的item项跳转到下一个页面。 一、效果图从左边的列表页调到右边的详情页二、页面之间的跳转首先要看的是页面的跳转，微信小程序有三种跳转方式可供选择：1、保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。wx.navigateTo({ ur
页面a跳转到页面b指定位置的方法
alokka的博客
07-07 7276
页面a跳转到页面b指定位置的方法1.锚点法a.html里：<a href="b.html#abc">xxx</a>b.html里加一个锚点：<div name="abc"></div>这样就可以直接跳转到只能位置啦在一个页面a进行跳转方法一、跳转到顶部 1、首先我们在网页body内最上面添加一个<span id="top" name="top"></span> 2、我们再到body内，需要出现点击后
html跳转页面携带数据
quietbxj的博客
09-12 3156
html跳转页面携带数据，源码如下： 第一个页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page 1</title> </head> &l
小程序怎么实现锚点跳转功能
最新发布
06-03
小程序可以通过使用`scroll-into-view`属性和`id`属性来实现锚点跳转功能。具体步骤如下： 1. 在需要跳转到的位置设置一个`id`属性值，例如： ``` <view id="anchor"></view> ``` 2. 在需要触发跳转的元素上设置`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值