微信小程序 通过 vant 实现选择城市

效果图

 

1. 准备

新建 utlis  > city.js

 city.js 数据源配置 导出

export default [
  {
    "letter": "A",
    "data": [
      {
        "cityName": "阿坝",
        "keyword": "阿坝ABA"
      },
      {
        "cityName": "阿克苏",
        "keyword": "阿克苏AKESU"
      },
      {
        "cityName": "阿拉善",
        "keyword": "阿拉善ALASHAN"
      },
      {
        "cityName": "阿勒泰",
        "keyword": "阿勒泰ALETAI"
      },
      {
        "cityName": "阿里",
        "keyword": "阿里ALI"
      },
      {
        "cityName": "安康",
        "keyword": "安康ANKANG"
      },
      {
        "cityName": "安庆",
        "keyword": "安庆ANQING"
      },
      {
        "cityName": "鞍山",
        "keyword": "鞍山ANSHAN"
      },
      {
        "cityName": "马鞍山",
        "keyword": "马鞍山MAANSHAN"
      },
      {
        "cityName": "安顺",
        "keyword": "安顺ANSHUN"
      },
      {
        "cityName": "安阳",
        "keyword": "安阳ANYANG"
      }
    ]
  },
  {
    "letter": "B",
    "data": [
      {
        "cityName": "白城",
        "keyword": "白城BAICHENG"
      },
      {
        "cityName": "白山",
        "keyword": "白山BAISHAN"
      },
      {
        "cityName": "白银",
        "keyword": "白银BAIYIN"
      },
      {
        "cityName": "保定",
        "keyword": "保定BAODING"
      },
      {
        "cityName": "宝鸡",
        "keyword": "宝鸡BAOJI"
      },
      {
        "cityName": "保山",
        "keyword": "保山BAOSHAN"
      },
      {
        "cityName": "包头",
        "keyword": "包头BAOTOU"
      },
      {
        "cityName": "巴彦淖尔",
        "keyword": "巴彦淖尔BAYANNAOER"
      },
      {
        "cityName": "巴音郭楞",
        "keyword": "巴音郭楞BAYINGUOLENG"
      },
      {
        "cityName": "巴中",
        "keyword": "巴中BAZHONG"
      },
      {
        "cityName": "北海",
        "keyword": "北海BEIHAI"
      },
      {
        "cityName": "北京",
        "keyword": "北京BEIJING"
      },
      {
        "cityName": "蚌埠",
        "keyword": "蚌埠BENGBU"
      },
      {
        "cityName": "本溪",
        "keyword": "本溪BENXI"
      },
      {
        "cityName": "毕节",
        "keyword": "毕节BIJIE"
      },
      {
        "cityName": "滨州",
        "keyword": "滨州BINZHOU"
      },
      {
        "cityName": "博尔塔拉",
        "keyword": "博尔塔拉BOERTALA"
      },
      {
        "cityName": "百色",
        "keyword": "百色BOSE"
      },
      {
        "cityName": "亳州",
        "keyword": "亳州BOZHOU"
      }
    ]
  },
  {
    "letter": "C",
    "data": [
      {
        "cityName": "沧州",
        "keyword": "沧州CANGZHOU"
      },
      {
        "cityName": "长春",
        "keyword": "长春CHANGCHUN"
      },
      {
        "cityName": "常德",
        "keyword": "常德CHANGDE"
      },
      {
        "cityName": "昌都",
        "keyword": "昌都CHANGDU"
      },
      {
        "cityName": "昌吉",
        "keyword": "昌吉CHANGJI"
      },
      {
        "cityName": "长沙",
        "keyword": "长沙CHANGSHA"
      },
      {
        "cityName": "长治",
        "keyword": "长治CHANGZHI"
      },
      {
        "cityName": "常州",
        "keyword": "常州CHANGZHOU"
      },
      {
        "cityName": "潮州",
        "keyword": "潮州CHAOZHOU"
      },
      {
        "cityName": "承德",
        "keyword": "承德CHENGDE"
      },
      {
        "cityName": "成都",
        "keyword": "成都CHENGDU"
      },
      {
        "cityName": "郴州",
        "keyword": "郴州CHENZHOU"
      },
      {
        "cityName": "赤峰",
        "keyword": "赤峰CHIFENG"
      },
      {
        "cityName": "池州",
        "keyword": "池州CHIZHOU"
      },
      {
        "cityName": "重庆",
        "keyword": "重庆CHONGQING"
      },
      {
        "cityName": "崇左",
        "keyword": "崇左CHONGZUO"
      },
      {
        "cityName": "楚雄",
        "keyword": "楚雄CHUXIONG"
      },
      {
        "cityName": "滁州",
        "keyword": "滁州CHUZHOU"
      }
    ]
  },
  {
    "letter": "D",
    "data": [
      {
        "cityName": "大理",
        "keyword": "大理DALI"
      },
      {
        "cityName": "大连",
        "keyword": "大连DALIAN"
      },
      {
        "cityName": "丹东",
        "keyword": "丹东DANDONG"
      },
      {
        "cityName": "儋州",
        "keyword": "儋州DANZHOU"
      },
      {
        "cityName": "大庆",
        "keyword": "大庆DAQING"
      },
      {
        "cityName": "大同",
        "keyword": "大同DATONG"
      },
      {
        "cityName": "大兴安岭",
        "keyword": "大兴安岭DAXINGANLING"
      },
      {
        "cityName": "达州",
        "keyword": "达州DAZHOU"
      },
      {
        "cityName": "德宏",
        "keyword": "德宏DEHONG"
      },
      {
        "cityName": "德阳",
        "keyword": "德阳DEYANG"
      },
      {
        "cityName": "德州",
        "keyword": "德州DEZHOU"
      },
      {
        "cityName": "定西",
        "keyword": "定西DINGXI"
      },
      {
        "cityName": "迪庆",
        "keyword": "迪庆DIQING"
      },
      {
        "cityName": "东莞",
        "keyword": "东莞DONGGUAN"
      },
      {
        "cityName": "东营",
        "keyword": "东营DONGYING"
      }
    ]
  },
  {
    "letter": "E",
    "data": [
      {
        "cityName": "鄂尔多斯",
        "keyword": "鄂尔多斯EERDUOSI"
      },
      {
        "cityName": "恩施",
        "keyword": "恩施ENSHI"
      },
      {
        "cityName": "鄂州",
        "keyword": "鄂州EZHOU"
      }
    ]
  },
  {
    "letter": "F",
    "data": [
      {
        "cityName": "防城港",
        "keyword": "防城港FANGCHENGGANG"
      },
      {
        "cityName": "佛山",
        "keyword": "佛山FOSHAN"
      },
      {
        "cityName": "抚顺",
        "keyword": "抚顺FUSHUN"
      },
      {
        "cityName": "阜新",
        "keyword": "阜新FUXIN"
      },
      {
        "cityName": "阜阳",
        "keyword": "阜阳FUYANG"
      },
      {
        "cityName": "抚州",
        "keyword": "抚州FUZHOU"
      },
      {
        "cityName": "福州",
        "keyword": "福州FUZHOU"
      }
    ]
  },
  {
    "letter": "G",
    "data": [
      {
        "cityName": "甘南",
        "keyword": "甘南GANNAN"
      },
      {
        "cityName": "赣州",
        "keyword": "赣州GANZHOU"
      },
      {
        "cityName": "甘孜",
        "keyword": "甘孜GANZI"
      },
      {
        "cityName": "广安",
        "keyword": "广安GUANGAN"
      },
      {
        "cityName": "广元",
        "keyword": "广元GUANGYUAN"
      },
      {
        "cityName": "广州",
        "keyword": "广州GUANGZHOU"
      },
      {
        "cityName": "贵港",
        "keyword": "贵港GUIGANG"
      },
      {
        "cityName": "桂林",
        "keyword": "桂林GUILIN"
      },
      {
        "cityName": "贵阳",
        "keyword": "贵阳GUIYANG"
      },
      {
        "cityName": "果洛",
        "keyword": "果洛GUOLUO"
      },
      {
        "cityName": "固原",
        "keyword": "固原GUYUAN"
      }
    ]
  },
  {
    "letter": "H",
    "data": [
      {
        "cityName": "哈尔滨",
        "keyword": "哈尔滨HAERBIN"
      },
      {
        "cityName": "海北",
        "keyword": "海北HAIBEI"
      },
      {
        "cityName": "海东",
        "keyword": "海东HAIDONG"
      },
      {
        "cityName": "海口",
        "keyword": "海口HAIKOU"
      },
      {
        "cityName": "海南藏族自治州",
        "keyword": "海南藏族自治州HAINAN"
      },
      {
        "cityName": "海南",
        "keyword": "海南藏族自治州HAINAN"
      },
      {
        "cityName": "海南",
        "keyword": "海南HAINAN"
      },
      {
        "cityName": "海西",
        "keyword": "海西HAIXI"
      },
      {
        "cityName": "哈密",
        "keyword": "哈密HAMI"
      },
      {
        "cityName": "邯郸",
        "keyword": "邯郸HANDAN"
      },
      {
        "cityName": "杭州",
        "keyword": "杭州HANGZHOU"
      },
      {
        "cityName": "汉中",
        "keyword": "汉中HANZHONG"
      },
      {
        "cityName": "河北",
        "keyword": "河北HEBEI"
      },
      {
        "cityName": "鹤壁",
        "keyword": "鹤壁HEBI"
      },
      {
        "cityName": "河池",
        "keyword": "河池HECHI"
      },
      {
        "cityName": "合肥",
        "keyword": "合肥HEFEI"
      },
      {
        "cityName": "鹤岗",
        "keyword": "鹤岗HEGANG"
      },
      {
        "cityName": "黑河",
        "keyword": "黑河HEIHE"
      },
      {
        "cityName": "河南",
        "keyword": "河南HENAN"
      },
      {
        "cityName": "衡水",
        "keyword": "衡水HENGSHUI"
      },
      {
        "cityName": "衡阳",
        "keyword": "衡阳HENGYANG"
      },
      {
        "cityName": "和田",
        "keyword": "和田HETIAN"
      },
      {
        "cityName": "河源",
        "keyword": "河源HEYUAN"
      },
      {
        "cityName": "菏泽",
        "keyword": "菏泽HEZE"
      },
      {
        "cityName": "贺州",
        "keyword": "贺州HEZHOU"
      },
      {
        "cityName": "红河",
        "keyword": "红河HONGHE"
      },
      {
        "cityName": "淮安",
        "keyword": "淮安HUAIAN"
      },
      {
        "cityName": "淮北",
        "keyword": "淮北HUAIBEI"
      },
      {
        "cityName": "怀化",
        "keyword": "怀化HUAIHUA"
      },
      {
        "cityName": "淮南",
        "keyword": "淮南HUAINAN"
      },
      {
        "cityName": "黄冈",
        "keyword": "黄冈HUANGGANG"
      },
      {
        "cityName": "黄南",
        "keyword": "黄南HUANGNAN"
      },
      {
        "cityName": "黄山",
        "keyword": "黄山HUANGSHAN"
      },
      {
        "cityName": "黄石",
        "keyword": "黄石HUANGSHI"
      },
      {
        "cityName": "湖北",
        "keyword": "湖北HUBEI"
      },
      {
        "cityName": "呼和浩特",
        "keyword": "呼和浩特HUHEHAOTE"
      },
      {
        "cityName": "惠州",
        "keyword": "惠州HUIZHOU"
      },
      {
        "cityName": "葫芦岛",
        "keyword": "葫芦岛HULUDAO"
      },
      {
        "cityName": "呼伦贝尔",
        "keyword": "呼伦贝尔HULUNBEIER"
      },
      {
        "cityName": "湖州",
        "keyword": "湖州HUZHOU"
      }
    ]
  },
  {
    "letter": "I",
    "data": [

    ]
  },
  {
    "letter": "J",
    "data": [
      {
        "cityName": "佳木斯",
        "keyword": "佳木斯JIAMUSI"
      },
      {
        "cityName": "吉安",
        "keyword": "吉安JIAN"
      },
      {
        "cityName": "江门",
        "keyword": "江门JIANGMEN"
      },
      {
        "cityName": "焦作",
        "keyword": "焦作JIAOZUO"
      },
      {
        "cityName": "嘉兴",
        "keyword": "嘉兴JIAXING"
      },
      {
        "cityName": "嘉峪关",
        "keyword": "嘉峪关JIAYUGUAN"
      },
      {
        "cityName": "揭阳",
        "keyword": "揭阳JIEYANG"
      },
      {
        "cityName": "吉林",
        "keyword": "吉林JILIN"
      },
      {
        "cityName": "济南",
        "keyword": "济南JINAN"
      },
      {
        "cityName": "金昌",
        "keyword": "金昌JINCHANG"
      },
      {
        "cityName": "晋城",
        "keyword": "晋城JINCHENG"
      },
      {
        "cityName": "景德镇",
        "keyword": "景德镇JINGDEZHEN"
      },
      {
        "cityName": "荆门",
        "keyword": "荆门JINGMEN"
      },
      {
        "cityName": "荆州",
        "keyword": "荆州JINGZHOU"
      },
      {
        "cityName": "金华",
        "keyword": "金华JINHUA"
      },
      {
        "cityName": "济宁",
        "keyword": "济宁JINING"
      },
      {
        "cityName": "晋中",
        "keyword": "晋中JINZHONG"
      },
      {
        "cityName": "锦州",
        "keyword": "锦州JINZHOU"
      },
      {
        "cityName": "九江",
        "keyword": "九江JIUJIANG"
      },
      {
        "cityName": "酒泉",
        "keyword": "酒泉JIUQUAN"
      },
      {
        "cityName": "鸡西",
        "keyword": "鸡西JIXI"
      }
    ]
  },
  {
    "letter": "K",
    "data": [
      {
        "cityName": "开封",
        "keyword": "开封KAIFENG"
      },
      {
        "cityName": "喀什",
        "keyword": "喀什KASHI"
      },
      {
        "cityName": "克拉玛依",
        "keyword": "克拉玛依KELAMAYI"
      },
      {
        "cityName": "克孜勒苏",
        "keyword": "克孜勒苏KEZILESU"
      },
      {
        "cityName": "昆明",
        "keyword": "昆明KUNMING"
      }
    ]
  },
  {
    "letter": "L",
    "data": [
      {
        "cityName": "来宾",
        "keyword": "来宾LAIBIN"
      },
      {
        "cityName": "莱芜",
        "keyword": "莱芜LAIWU"
      },
      {
        "cityName": "廊坊",
        "keyword": "廊坊LANGFANG"
      },
      {
        "cityName": "兰州",
        "keyword": "兰州LANZHOU"
      },
      {
        "cityName": "拉萨",
        "keyword": "拉萨LASA"
      },
      {
        "cityName": "乐山",
        "keyword": "乐山LESHAN"
      },
      {
        "cityName": "凉山",
        "keyword": "凉山LIANGSHAN"
      },
      {
        "cityName": "连云港",
        "keyword": "连云港LIANYUNGANG"
      },
      {
        "cityName": "聊城",
        "keyword": "聊城LIAOCHENG"
      },
      {
        "cityName": "辽阳",
        "keyword": "辽阳LIAOYANG"
      },
      {
        "cityName": "辽源",
        "keyword": "辽源LIAOYUAN"
      },
      {
        "cityName": "丽江",
        "keyword": "丽江LIJIANG"
      },
      {
        "cityName": "临沧",
        "keyword": "临沧LINCANG"
      },
      {
        "cityName": "临汾",
        "keyword": "临汾LINFEN"
      },
      {
        "cityName": "临夏",
        "keyword": "临夏LINXIA"
      },
      {
        "cityName": "临沂",
        "keyword": "临沂LINYI"
      },
      {
        "cityName": "林芝",
        "keyword": "林芝LINZHI"
      },
      {
        "cityName": "丽水",
        "keyword": "丽水LISHUI"
      },
      {
        "cityName": "六盘水",
        "keyword": "六盘水LIUPANSHUI"
      },
      {
        "cityName": "柳州",
        "keyword": "柳州LIUZHOU"
      },
      {
        "cityName": "陇南",
        "keyword": "陇南LONGNAN"
      },
      {
        "cityName": "龙岩",
        "keyword": "龙岩LONGYAN"
      },
      {
        "cityName": "娄底",
        "keyword": "娄底LOUDI"
      },
      {
        "cityName": "六安",
        "keyword": "六安LUAN"
      },
      {
        "cityName": "洛阳",
        "keyword": "洛阳LUOYANG"
      },
      {
        "cityName": "泸州",
        "keyword": "泸州LUZHOU"
      },
      {
        "cityName": "吕梁",
        "keyword": "吕梁LVLIANG"
      }
    ]
  },
  {
    "letter": "M",
    "data": [
      {
        "cityName": "马鞍山",
        "keyword": "马鞍山MAANSHAN"
      },
      {
        "cityName": "茂名",
        "keyword": "茂名MAOMING"
      },
      {
        "cityName": "眉山",
        "keyword": "眉山MEISHAN"
      },
      {
        "cityName": "梅州",
        "keyword": "梅州MEIZHOU"
      },
      {
        "cityName": "绵阳",
        "keyword": "绵阳MIANYANG"
      },
      {
        "cityName": "牡丹江",
        "keyword": "牡丹江MUDANJIANG"
      }
    ]
  },
  {
    "letter": "N",
    "data": [
      {
        "cityName": "南昌",
        "keyword": "南昌NANCHANG"
      },
      {
        "cityName": "南充",
        "keyword": "南充NANCHONG"
      },
      {
        "cityName": "南京",
        "keyword": "南京NANJING"
      },
      {
        "cityName": "南宁",
        "keyword": "南宁NANNING"
      },
      {
        "cityName": "南平",
        "keyword": "南平NANPING"
      },
      {
        "cityName": "南通",
        "keyword": "南通NANTONG"
      },
      {
        "cityName": "南阳",
        "keyword": "南阳NANYANG"
      },
      {
        "cityName": "那曲",
        "keyword": "那曲NAQU"
      },
      {
        "cityName": "内江",
        "keyword": "内江NEIJIANG"
      },
      {
        "cityName": "宁波",
        "keyword": "宁波NINGBO"
      },
      {
        "cityName": "宁德",
        "keyword": "宁德NINGDE"
      },
      {
        "cityName": "怒江",
        "keyword": "怒江NUJIANG"
      }
    ]
  },
  {
    "letter": "O",
    "data": [

    ]
  },
  {
    "letter": "P",
    "data": [
      {
        "cityName": "盘锦",
        "keyword": "盘锦PANJIN"
      },
      {
        "cityName": "攀枝花",
        "keyword": "攀枝花PANZHIHUA"
      },
      {
        "cityName": "平顶山",
        "keyword": "平顶山PINGDINGSHAN"
      },
      {
        "cityName": "平凉",
        "keyword": "平凉PINGLIANG"
      },
      {
        "cityName": "萍乡",
        "keyword": "萍乡PINGXIANG"
      },
      {
        "cityName": "普洱",
        "keyword": "普洱PUER"
      },
      {
        "cityName": "莆田",
        "keyword": "莆田PUTIAN"
      },
      {
        "cityName": "濮阳",
        "keyword": "濮阳PUYANG"
      }
    ]
  },
  {
    "letter": "Q",
    "data": [
      {
        "cityName": "黔东南",
        "keyword": "黔东南QIANDONGNAN"
      },
      {
        "cityName": "黔南",
        "keyword": "黔南QIANNAN"
      },
      {
        "cityName": "黔西南",
        "keyword": "黔西南QIANXINAN"
      },
      {
        "cityName": "青岛",
        "keyword": "青岛QINGDAO"
      },
      {
        "cityName": "庆阳",
        "keyword": "庆阳QINGYANG"
      },
      {
        "cityName": "清远",
        "keyword": "清远QINGYUAN"
      },
      {
        "cityName": "秦皇岛",
        "keyword": "秦皇岛QINHUANGDAO"
      },
      {
        "cityName": "钦州",
        "keyword": "钦州QINZHOU"
      },
      {
        "cityName": "齐齐哈尔",
        "keyword": "齐齐哈尔QIQIHAER"
      },
      {
        "cityName": "七台河",
        "keyword": "七台河QITAIHE"
      },
      {
        "cityName": "泉州",
        "keyword": "泉州QUANZHOU"
      },
      {
        "cityName": "曲靖",
        "keyword": "曲靖QUJING"
      },
      {
        "cityName": "衢州",
        "keyword": "衢州QUZHOU"
      }
    ]
  },
  {
    "letter": "R",
    "data": [
      {
        "cityName": "日喀则",
        "keyword": "日喀则RIKAZE"
      },
      {
        "cityName": "日照",
        "keyword": "日照RIZHAO"
      }
    ]
  },
  {
    "letter": "S",
    "data": [
      {
        "cityName": "三门峡",
        "keyword": "三门峡SANMENXIA"
      },
      {
        "cityName": "三明",
        "keyword": "三明SANMING"
      },
      {
        "cityName": "三沙",
        "keyword": "三沙SANSHA"
      },
      {
        "cityName": "三亚",
        "keyword": "三亚SANYA"
      },
      {
        "cityName": "上海",
        "keyword": "上海SHANGHAI"
      },
      {
        "cityName": "商洛",
        "keyword": "商洛SHANGLUO"
      },
      {
        "cityName": "商丘",
        "keyword": "商丘SHANGQIU"
      },
      {
        "cityName": "上饶",
        "keyword": "上饶SHANGRAO"
      },
      {
        "cityName": "山南",
        "keyword": "山南SHANNAN"
      },
      {
        "cityName": "汕头",
        "keyword": "汕头SHANTOU"
      },
      {
        "cityName": "汕尾",
        "keyword": "汕尾SHANWEI"
      },
      {
        "cityName": "韶关",
        "keyword": "韶关SHAOGUAN"
      },
      {
        "cityName": "绍兴",
        "keyword": "绍兴SHAOXING"
      },
      {
        "cityName": "邵阳",
        "keyword": "邵阳SHAOYANG"
      },
      {
        "cityName": "沈阳",
        "keyword": "沈阳SHENYANG"
      },
      {
        "cityName": "深圳",
        "keyword": "深圳SHENZHEN"
      },
      {
        "cityName": "石家庄",
        "keyword": "石家庄SHIJIAZHUANG"
      },
      {
        "cityName": "十堰",
        "keyword": "十堰SHIYAN"
      },
      {
        "cityName": "石嘴山",
        "keyword": "石嘴山SHIZUISHAN"
      },
      {
        "cityName": "双鸭山",
        "keyword": "双鸭山SHUANGYASHAN"
      },
      {
        "cityName": "朔州",
        "keyword": "朔州SHUOZHOU"
      },
      {
        "cityName": "四平",
        "keyword": "四平SIPING"
      },
      {
        "cityName": "松原",
        "keyword": "松原SONGYUAN"
      },
      {
        "cityName": "绥化",
        "keyword": "绥化SUIHUA"
      },
      {
        "cityName": "遂宁",
        "keyword": "遂宁SUINING"
      },
      {
        "cityName": "随州",
        "keyword": "随州SUIZHOU"
      },
      {
        "cityName": "宿迁",
        "keyword": "宿迁SUQIAN"
      },
      {
        "cityName": "苏州",
        "keyword": "苏州SUZHOU"
      },
      {
        "cityName": "宿州",
        "keyword": "宿州SUZHOU"
      }
    ]
  },
  {
    "letter": "T",
    "data": [
      {
        "cityName": "塔城",
        "keyword": "塔城TACHENG"
      },
      {
        "cityName": "漯河",
        "keyword": "漯河TAHE"
      },
      {
        "cityName": "泰安",
        "keyword": "泰安TAIAN"
      },
      {
        "cityName": "太原",
        "keyword": "太原TAIYUAN"
      },
      {
        "cityName": "泰州",
        "keyword": "泰州TAIZHOU"
      },
      {
        "cityName": "台州",
        "keyword": "台州TAIZHOU"
      },
      {
        "cityName": "唐山",
        "keyword": "唐山TANGSHAN"
      },
      {
        "cityName": "天津",
        "keyword": "天津TIANJIN"
      },
      {
        "cityName": "天水",
        "keyword": "天水TIANSHUI"
      },
      {
        "cityName": "铁岭",
        "keyword": "铁岭TIELING"
      },
      {
        "cityName": "铜川",
        "keyword": "铜川TONGCHUAN"
      },
      {
        "cityName": "通化",
        "keyword": "通化TONGHUA"
      },
      {
        "cityName": "通辽",
        "keyword": "通辽TONGLIAO"
      },
      {
        "cityName": "铜陵",
        "keyword": "铜陵TONGLING"
      },
      {
        "cityName": "铜仁",
        "keyword": "铜仁TONGREN"
      },
      {
        "cityName": "吐鲁番",
        "keyword": "吐鲁番TULUFAN"
      }
    ]
  },
  {
    "letter": "W",
    "data": [
      {
        "cityName": "潍坊",
        "keyword": "潍坊WEIFANG"
      },
      {
        "cityName": "威海",
        "keyword": "威海WEIHAI"
      },
      {
        "cityName": "渭南",
        "keyword": "渭南WEINAN"
      },
      {
        "cityName": "文山",
        "keyword": "文山WENSHAN"
      },
      {
        "cityName": "温州",
        "keyword": "温州WENZHOU"
      },
      {
        "cityName": "乌海",
        "keyword": "乌海WUHAI"
      },
      {
        "cityName": "武汉",
        "keyword": "武汉WUHAN"
      },
      {
        "cityName": "芜湖",
        "keyword": "芜湖WUHU"
      },
      {
        "cityName": "乌兰察布",
        "keyword": "乌兰察布WULANCHABU"
      },
      {
        "cityName": "乌鲁木齐",
        "keyword": "乌鲁木齐WULUMUQI"
      },
      {
        "cityName": "武威",
        "keyword": "武威WUWEI"
      },
      {
        "cityName": "无锡",
        "keyword": "无锡WUXI"
      },
      {
        "cityName": "吴忠",
        "keyword": "吴忠WUZHONG"
      },
      {
        "cityName": "梧州",
        "keyword": "梧州WUZHOU"
      }
    ]
  },
  {
    "letter": "X",
    "data": [
      {
        "cityName": "厦门",
        "keyword": "厦门XIAMEN"
      },
      {
        "cityName": "西安",
        "keyword": "西安XIAN"
      },
      {
        "cityName": "湘潭",
        "keyword": "湘潭XIANGTAN"
      },
      {
        "cityName": "湘西",
        "keyword": "湘西XIANGXI"
      },
      {
        "cityName": "襄阳",
        "keyword": "襄阳XIANGYANG"
      },
      {
        "cityName": "咸宁",
        "keyword": "咸宁XIANNING"
      },
      {
        "cityName": "咸阳",
        "keyword": "咸阳XIANYANG"
      },
      {
        "cityName": "孝感",
        "keyword": "孝感XIAOGAN"
      },
      {
        "cityName": "锡林郭勒",
        "keyword": "锡林郭勒XILINGUOLE"
      },
      {
        "cityName": "兴安",
        "keyword": "大兴安岭DAXINGANLING"
      },
      {
        "cityName": "兴安",
        "keyword": "兴安XINGAN"
      },
      {
        "cityName": "邢台",
        "keyword": "邢台XINGTAI"
      },
      {
        "cityName": "西宁",
        "keyword": "西宁XINING"
      },
      {
        "cityName": "新疆",
        "keyword": "新疆XINJIANG"
      },
      {
        "cityName": "新乡",
        "keyword": "新乡XINXIANG"
      },
      {
        "cityName": "信阳",
        "keyword": "信阳XINYANG"
      },
      {
        "cityName": "新余",
        "keyword": "新余XINYU"
      },
      {
        "cityName": "忻州",
        "keyword": "忻州XINZHOU"
      },
      {
        "cityName": "西双版纳",
        "keyword": "西双版纳XISHUANGBANNA"
      },
      {
        "cityName": "宣城",
        "keyword": "宣城XUANCHENG"
      },
      {
        "cityName": "许昌",
        "keyword": "许昌XUCHANG"
      },
      {
        "cityName": "徐州",
        "keyword": "徐州XUZHOU"
      }
    ]
  },
  {
    "letter": "Y",
    "data": [
      {
        "cityName": "雅安",
        "keyword": "雅安YAAN"
      },
      {
        "cityName": "延安",
        "keyword": "延安YANAN"
      },
      {
        "cityName": "延边",
        "keyword": "延边YANBIAN"
      },
      {
        "cityName": "盐城",
        "keyword": "盐城YANCHENG"
      },
      {
        "cityName": "阳江",
        "keyword": "阳江YANGJIANG"
      },
      {
        "cityName": "阳泉",
        "keyword": "阳泉YANGQUAN"
      },
      {
        "cityName": "扬州",
        "keyword": "扬州YANGZHOU"
      },
      {
        "cityName": "烟台",
        "keyword": "烟台YANTAI"
      },
      {
        "cityName": "宜宾",
        "keyword": "宜宾YIBIN"
      },
      {
        "cityName": "宜昌",
        "keyword": "宜昌YICHANG"
      },
      {
        "cityName": "伊春",
        "keyword": "伊春YICHUN"
      },
      {
        "cityName": "宜春",
        "keyword": "宜春YICHUN"
      },
      {
        "cityName": "伊犁",
        "keyword": "伊犁YILI"
      },
      {
        "cityName": "银川",
        "keyword": "银川YINCHUAN"
      },
      {
        "cityName": "营口",
        "keyword": "营口YINGKOU"
      },
      {
        "cityName": "鹰潭",
        "keyword": "鹰潭YINGTAN"
      },
      {
        "cityName": "益阳",
        "keyword": "益阳YIYANG"
      },
      {
        "cityName": "永州",
        "keyword": "永州YONGZHOU"
      },
      {
        "cityName": "岳阳",
        "keyword": "岳阳YUEYANG"
      },
      {
        "cityName": "玉林",
        "keyword": "玉林YULIN"
      },
      {
        "cityName": "榆林",
        "keyword": "榆林YULIN"
      },
      {
        "cityName": "运城",
        "keyword": "运城YUNCHENG"
      },
      {
        "cityName": "云浮",
        "keyword": "云浮YUNFU"
      },
      {
        "cityName": "玉树",
        "keyword": "玉树YUSHU"
      },
      {
        "cityName": "玉溪",
        "keyword": "玉溪YUXI"
      }
    ]
  },
  {
    "letter": "Z",
    "data": [
      {
        "cityName": "枣庄",
        "keyword": "枣庄ZAOZHUANG"
      },
      {
        "cityName": "张家界",
        "keyword": "张家界ZHANGJIAJIE"
      },
      {
        "cityName": "张家口",
        "keyword": "张家口ZHANGJIAKOU"
      },
      {
        "cityName": "张掖",
        "keyword": "张掖ZHANGYE"
      },
      {
        "cityName": "漳州",
        "keyword": "漳州ZHANGZHOU"
      },
      {
        "cityName": "湛江",
        "keyword": "湛江ZHANJIANG"
      },
      {
        "cityName": "肇庆",
        "keyword": "肇庆ZHAOQING"
      },
      {
        "cityName": "昭通",
        "keyword": "昭通ZHAOTONG"
      },
      {
        "cityName": "朝阳",
        "keyword": "朝阳ZHAOYANG"
      },
      {
        "cityName": "郑州",
        "keyword": "郑州ZHENGZHOU"
      },
      {
        "cityName": "镇江",
        "keyword": "镇江ZHENJIANG"
      },
      {
        "cityName": "中山",
        "keyword": "中山ZHONGSHAN"
      },
      {
        "cityName": "中卫",
        "keyword": "中卫ZHONGWEI"
      },
      {
        "cityName": "周口",
        "keyword": "周口ZHOUKOU"
      },
      {
        "cityName": "舟山",
        "keyword": "舟山ZHOUSHAN"
      },
      {
        "cityName": "珠海",
        "keyword": "珠海ZHUHAI"
      },
      {
        "cityName": "驻马店",
        "keyword": "驻马店ZHUMADIAN"
      },
      {
        "cityName": "株洲",
        "keyword": "株洲ZHUZHOU"
      },
      {
        "cityName": "淄博",
        "keyword": "淄博ZIBO"
      },
      {
        "cityName": "自贡",
        "keyword": "自贡ZIGONG"
      },
      {
        "cityName": "资阳",
        "keyword": "资阳ZIYANG"
      },
      {
        "cityName": "遵义",
        "keyword": "遵义ZUNYI"
      }
    ]
  }
]

2.开始页面

wxml

<view class="vh-100  pt-60 city-containery">

  <!-- 搜索框 -->
  <view class="flex  items-center justify-between nav-Searc">
    <view class="ml-20" bindtap="navSearcclose">
      <van-icon name="close" class="mt-10" />
    </view>
    <view class="flex-1 search-bar ">
      <view class="search-bar-form">
        <view class="search-bar-box">
          <!-- <icon class="icon-search-in-box" type="search" size="16"></icon> -->
          <input confirm-type="search" class="search-bar-input" placeholder="输入城市名称或首字母查询" placeholder-class="phcolor" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
          <view class="icon-clear" wx:if="{{inputVal}}" bindtap="clearInput">
            <icon type="clear" size="15"></icon>
          </view>
        </view>
        <label class="search-bar-label" wx:if="{{!inputShowed}}" bindtap="showInput">
          <!-- <icon class="icon-search" type="search" size="16"></icon> -->
          <view class="search-bar-text">输入城市名称或首字母查询</view>
        </label>
      </view>
    </view>
  </view>

  <!-- 定位当前 -->
  <view class="location flex justify-between mt-10 mb-10" wx:if="{{!inputShowed}}">
    <view class="top ml-10">当前：{{CurrentLocation.city}}</view>
    <view class="bottom mr-10 flex">
      <van-icon name="close" class="mr-10" />
      <text bindtap="getCurrentPositioning">重新定位</text>
    </view>
  </view>

  <!-- 搜索出来的关键词 -->
  <view class="tui-list search-result" wx:if="{{inputShowed}}">
    <view class="tui-list-cell" hover-class="tui-list-cell-hover" wx:for="{{searchResult}}" wx:key="index" bindtap="selectCity" data-name="{{item}}" hover-stay-time='150'>
      <view class="tui-list-cell-navigate">
        {{item}}
      </view>
    </view>
  </view>


  <!-- 热门城市  -->
  <!-- sticky:关闭吸顶 -->
  <!-- 选中的索引颜色 highlight-color="" -->
  <van-index-bar sticky="false" z-index="2">
    <van-index-anchor index="热门城市" wx:if="{{!inputShowed}}" />
    <view class="dg x-city-hot container" wx:if="{{!inputShowed}}">
      <block wx:for="{{hotCity}}" wx:key="index">
        <view class="dg place-center x-city-hot-item" bindtap="selectCity" data-name="{{item}}">{{item}}</view>
      </block>
    </view>
    <!-- 各类城市 -->
    <block wx:for="{{cityJson}}" wx:key="index">
      <view>
        <!-- 字母排序 -->
        <van-index-anchor index="{{item.letter}}" />
        <!-- 城市 -->
        <block wx:for="{{item.data}}" wx:key="index">
          <van-cell title=" {{item.cityName}}" bindtap="selectCity2" data-name="{{item}}" />
        </block>
      </view>
    </block>
  </van-index-bar>

</view>

js

// 获取到app实例
const app = getApp()
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../../../libs/qqmap/qqmap-wx-jssdk.js');
var qqmapsdk;
import cityJson from '../../../../utils/city'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    cityJson, // 城市数据源
    hotCity: ['北京', '上海', '广州', '深圳', '杭州', '长沙', '武汉', '厦门', '西安', '昆明', '成都', '重庆'], // 热门城市
    searchResult: [], // 搜索城市的结果
    inputShowed: false, // 输入框是否显示
    inputVal: '', // 搜索框输入的内容
    // 当前城市
    CurrentLocation: {
      province: '定位',   // 省份
      city: '', // 城市
      district: '',// 地区
    },
    // 显示的下标
    showIndex: 10,
    // 创建问题的数据源
    questList: [
      {
        questions: '是否需要预约？',
        answers: "需要哦，因为是专科医生操作，所以请提前3-5天预约。 ",
        t: false,
        // icon q 
        icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',
        // icon a
        icon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',
        // 下箭头
        downArrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',
        // 上箭头
        uparrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',
      },
      {
        questions: '会否出报告？报告是纸质还是电子版的？',
        answers: "来体检的动物，会提供电子版的报告（PDF或照片），如需要纸质报告，请在体检前告知医生，以便及时为您准备好。 ",
        t: false,
        // icon q 
        icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',
        // icon a
        icon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',
        // 下箭头
        downArrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',
        // 上箭头
        uparrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',
      },
      {
        questions: '报告是现场给吗？',
        answers: "一般我们会1-3个工作日提供心超报告，其余报告可以当时提供。 ",
        t: false,
        // icon q 
        icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',
        // icon a
        icon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',
        // 下箭头
        downArrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',
        // 上箭头
        uparrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',
      },
      {
        questions: '我的猫狗需要提前准备什么吗？',
        answers: "正常情况不需要；如果猫咪容易应激，请在预约时告知客服，并听取医生的建议，提前做相关的准备。",
        t: false,
        // icon q 
        icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',
        // icon a
        icon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',
        // 下箭头
        downArrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',
        // 上箭头
        uparrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',
      },
      {
        questions: '我的猫狗体检的时候，我可以在旁边吗？',
        answers: "有些操作主人是可以陪伴的；有些要根据主人在旁边时动物配合的实际情况，医生会给与主人是否回避的原因和建议。",
        t: false,
        // icon q 
        icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',
        // icon a
        icon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',
        // 下箭头
        downArrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',
        // 上箭头
        uparrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',
      },
      {
        questions: '我的猫狗刚刚做过检查，我可以不重复做同样?',
        answers: "可以在预约时告知具体情况，客服或医生可能会请您携带有关检查报告，并根据实际情况有针对性、有选择的告知您，具体怎么安排对动物最友善、对诊断也最合适。 ",
        t: false,
        // icon q 
        icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',
        // icon a
        icon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',
        // 下箭头
        downArrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',
        // 上箭头
        uparrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',
      },
      {
        questions: '我的猫狗在检查过程中发现有比较严重的问题?',
        answers: "作设有心内专科、外科专科的综合性医院，即便是基础体检过程中，发现有重大疑点或问题，院内专家团队都会加入会诊并共同制定接下来的检查、诊断、治疗方案。一站式的全面专业服务，是我们的特色和优势。 ",
        t: false,
        // icon q 
        icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',
        // icon a
        icon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',
        // 下箭头
        downArrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',
        // 上箭头
        uparrow: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',
      }
    ],
    // 获取全局共享数据 状态栏高度
    statsBarHeight: app.globalData.statusBarHeight, // 44px
    //  获取全局共享数据 导航栏高度
    naviBarHeight: app.globalData.naviBarHeight, // 44px
  },
  // 后退上一页 back
  tapBack() {
    wx.navigateBack({
      delta: 1,
      fail() {
        wx.switchTab({
          url: '/pages/home/index',
        })
      },
    })
  },
  // 折叠面板 展开收起的方法
  changOpen(e) {
    this.data.questList[e.currentTarget.dataset.index].t = !this.data.questList[e.currentTarget.dataset.index].t
    this.setData({
      questList: this.data.questList
    })
    if (e.currentTarget.dataset.index != this.data.showIndex) {
      // console.log('true的时候');
      this.setData({
        showIndex: e.currentTarget.dataset.index,
      })
    }
    else {
      // console.log('false的时候');
      this.setData({
        showIndex: 10
      })
    }

  },
  // 医生详情1
  goDoctor1() {
    // let { id, title } = e.currentTarget.dataset
    // app.gio('track', 'p_product_ljck_but_tap', { p_product_type_a: title })
    wx.navigateTo({
      url: `plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=39548222`,
    })
  },
  // 医生详情2
  goDoctor2() {
    wx.navigateTo({
      url: `plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=39548222`,
    })
  },
  // 定位
  getLocation() {
    console.log('打开城市选择');
    wx.navigateTo({
      // url: '/pages/subPackages/other/selectCity/selectCity',
    })
  },
  // 获取当前定位
  getCurrentPositioning() {
    // 微信小程序自带获取当前的地理位置
    wx.getLocation({
      type: 'wgs84'
    }).then((res) => {
      // 腾讯api周边
      qqmapsdk.search({
        keyword: '学校',
        success: (res) => {
          // console.log('腾讯api周边', res.data[0]);
          const CurrentLocation = res.data[0].ad_info
          console.log('CurrentLocation', CurrentLocation);
          this.setData({
            CurrentLocation: CurrentLocation
          })
        },
      })
    }).catch((error) => {
      // console.log('授权失败', error);
      if (error.errMsg == 'getLocation:fail auth deny') {
        this.setData({
          "CurrentLocation.city": '点击选择当前城市'
        })
      }
    })
  },
  // 显示输入框
  showInput() {
    this.setData({
      inputShowed: true
    })
  },
  // 清除输入框
  clearInput() {
    console.log('111');
    this.setData({
      inputVal: "",
      inputShowed: false,
      searchResult: []
    })
    wx.hideKeyboard() //强行隐藏键盘
  },
  // 输入框 输入触发事件
  inputTyping(e) {
    // console.log('输入法输入触发的事件', e);
    this.setData({
      inputVal: e.detail.value
    }, () => {
      // 调用搜索城市
      this.searchCity()
    })
  },
  // 搜索城市
  searchCity() {
    let result = []
    // 双遍历
    this.data.cityJson.forEach((item1, index1) => {
      item1.data.forEach((item2, index2) => {
        if (item2.keyword.indexOf(this.data.inputVal.toLocaleUpperCase()) !== -1) {
          result.push(item2.cityName)
        }
      })
    })
    this.setData({
      searchResult: result,
    })
  },
  // 搜索出来的关键词的点击事件
  selectCity(e) {
    let cityName = e.currentTarget.dataset.name;
    console.log('搜索出来的关键词的点击事件', cityName);
    this.setData({
      'CurrentLocation.city': cityName
    })
    //返回并刷新上一页面
    // let pages = getCurrentPages();
  },
  selectCity2(e) {
    let { cityName } = e.currentTarget.dataset.name;
    console.log('搜索出来的关键词的点击事件', cityName);
    this.setData({
      'CurrentLocation.city': cityName
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // // 实例化API核心类  (腾讯位置服务的)配置
    qqmapsdk = new QQMapWX({
      key: 'key'
    });
    // 用户获取当前地理位置信息
    this.getCurrentPositioning()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

json

{
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index",
    "van-button": "@vant/weapp/button/index",
    "van-index-bar": "@vant/weapp/index-bar/index",
    "van-index-anchor": "@vant/weapp/index-anchor/index",
    "van-cell": "@vant/weapp/cell/index"
  },
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white"
}

wxss

/* pages/subPackages/other/cardiacultrasound/index.wxss */
page {
  // background-color: #ff6c5c;
  padding-bottom: 67px;
}

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }

 .items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
 .justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.ml-20 {
  margin-left: 40rpx;
}

.mt-10 {
  margin-top: 20rpx;
}

.flex-1 {
  flex: 1;
}
.mb-10 {
  margin-bottom: 20rpx;
}
.ml-10 {
    margin-left: 20rpx;
  }
.mr-10 {
  margin-right: 20rpx;
}

.dg {
  display: grid;
}


// 顶部搜索框
.nav-Searc {
  height: 150rpx;
  background-color: #f4f4f4;
}

/* 搜索框 */
.search-bar {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0rpx 30rpx 0rpx 30rpx;
  // background-color: #fff;
}

.search-bar-form {
  flex: 1;
  position: relative;
  border-radius: 32rpx;
  background: #fff;
}

.search-bar-box {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 20rpx;
  padding-right: 20rpx;
  height: 64rpx;
  z-index: 1;
}

.search-bar-input {
  line-height: normal;
  width: 100%;
  padding-left: 20rpx;
  font-size: 30rpx;
  color: #333;
}

.phcolor {
  font-size: 30rpx;
}

.icon-clear {
  height: 38rpx;
}

.search-bar-label {
  height: 64rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: 32rpx;
  color: #ccc;
  background: #fff;
}

.icon-search {
  position: relative;
  height: 26rpx;
  margin-right: 20rpx;
  font-size: inherit;
}

.search-bar-text {
  font-size: 30rpx;
  line-height: 32rpx;
}

.cancel-btn {
  padding-left: 30rpx;
}

.search-result::before {
  display: none;
}

.search-result::after {
  display: none;
}

.tui-list-cell {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.tui-list-cell-hover {
  background-color: #eee !important;
}

.tui-list-cell-navigate {
  width: 100%;
  position: relative;
  padding: 30rpx 0 30rpx 30rpx;
  font-size: 28rpx;
  color: #333;
}

.tui-list-cell-navigate::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 30rpx;
}

// 搜索框区域结束

/* 侧边 abcd 导航栏 */
.van-index-bar__sidebar {
  // background-color: pink;
  margin-top: 90rpx;
}

// 左边 abcd 标题 内容 的 排序
.van-index-anchor {
  background: #f2f5f7 !important;
}



// 自定义导航栏 开始
.top_back {
  width: 100%;
  height: auto;
  position: absolute;
  overflow: hidden;
  z-index: 1;
  left: 0;
  top: 0;

  .navigate {
    padding-left: 40rpx;
    padding-top: 20rpx;
    font-size: 40rpx;
  }
}

// 自定义导航栏 结束


// banner 开始
.barren {
  position: relative;

  .banner-title {
    border-radius: 100rpx;
    position: relative;
    width: 706rpx;
    height: 144rpx;
    line-height: 144rpx;
    background-color: #fff;
    position: absolute;
    bottom: -15rpx;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    >view {
      color: #FFF;
      border-radius: 50%;
      width: 144rpx;
      height: 144rpx;
      line-height: 144rpx;
      background: linear-gradient(188deg, #FF8A55 0%, #FF8451 27%, #FF5D33 100%);
      position: absolute;
      bottom: 0;
      right: 0%;
    }
  }
}

// banner 结束

// 内容开始
.content {
  min-height: 959px;
  background-color: #fff;
  margin: 20rpx;
  margin-top: 40rpx;
  border-radius: 40rpx;
  padding: 34rpx;
}

// 内容结束

.doctorimg {
  position: relative;
  width: 700rpx;
  height: 600rpx;

  image {
    position: absolute;
    left: -30rpx;
    width: 100%;
    height: 100%;
  }
}

.region {
  width: 646rpx;
  text-align: center;
  height: 244rpx;
  background: #FFF5F0;
  border-radius: 28rpx;
}



// 常见问题开始
.problem {
  min-height: 0rpx;
  background-color: #fff;
  margin: 20rpx;
  margin-top: 40rpx;
  border-radius: 40rpx;
  padding: 34rpx;

  // 循环的 每一项
  .problem-item {
    border-bottom: 1px solid #f5f3ed;
    padding: 30rpx 0;

    // 标题  
    .problem-item-title {
      display: flex;
      justify-content: space-between;

      >view:nth-child(1) {
        display: flex;

        >view:nth-child(1) {
          margin-top: 2rpx;
          width: 32rpx;
          border-radius: 50%;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }


      >view:nth-child(2) {
        width: 11px;
        height: 6px;
        border: 50%;

        image {
          width: 100%;
          height: 100%;
        }
      }

    }

    // 问题区域
    .detailedquestions {
      border-right-color: seagreen;

      .l {
        margin-top: 10rpx;
        width: 32rpx;
        height: 32rpx;

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
}

// 常见问题结束
.x-city-hot {
  grid-template-columns: repeat(4, 1fr);
}

.x-city-hot-item {
  width: 74px;
  height: 29px;
  margin-top: 8px;
  border-radius: 14px;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
}