小程序城市选择自定义组件

小程序城市选择自定义组件


针对微信小程序选择城市这块,本文开发的小程序为开发提供者一个参考,注意:如果不了解如何使用微信小程序自定义组件的,建议先看一下官方说明:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
效果图

前言

类似功能的小程序也有挺多,其实都是大同小异,有部分样式是参考其他小程序,该小程序还在开发中,还有很多没有完善…
有问题关注公众号回复:'微信’,加我微信,备注“公众号”。
在这里插入图片描述

文件目录

  • components
    • address
      • address.js //自定义组件逻辑处理
      • address.json
      • address.wxml //自定义组件视图
      • address.wxss //自定义组件样式文件
      • config.wxs //小程序脚本配置文件
  • pages
    • index
      • index.js
      • index.json
      • index.wxml
      • index.wxss

index中引入组件

首先要在index,json中引入组件,代码如下

{
	"usingComponents": {
    "address": "../../components/address/address"
  }
}

然后在index.wxml中使用组件


 <view class='wrapper'> 
  <address my-city="北京" data="{{city}}" binddetail="bindtap"></address>
 </view> 
 <!--参数说明:
 	data [Object] : 列表所需要的数据(所有城市的json格式)
 	my-city [String]: 我的城市, 
 -->

city中的数据如图所示,如需这些数据可以私信我。
let city = require(’…/…/data/allcity.js’);
在这里插入图片描述


var city = [
  {
    title:"热门城市",
    type:'hot',
    item: [

      // {
      //   "name": "北京",
      //   "key": "热门",
      //   "test":"testValue"
      // },
      // {
      //   "name": "上海",
      //   "key": "热门"
      // },
      // {
      //   "name": "广州",
      //   "key": "热门"
      // },
      // {
      //   "name": "深圳",
      //   "key": "热门"
      // },
      // {
      //   "name": "成都",
      //   "key": "热门"
      // },

      // {
      //   "name": "重庆",
      //   "key": "热门"
      // },
      // {
      //   "name": "天津",
      //   "key": "热门"
      // },
      // {
      //   "name": "杭州",
      //   "key": "热门"
      // },
      // {
      //   "name": "南京",
      //   "key": "热门"
      // },
      // {
      //   "name": "苏州",
      //   "key": "热门"
      // },
      // {
      //   "name": "武汉",
      //   "key": "热门"
      // },

      // {
      //   "name": "西安",
      //   "key": "热门"
      // }

    ]
  }, {
    title:"A",
    item: [
      {
        "name": "阿坝",
        "key": "A"
      },
      {
        "name": "阿拉善",
        "key": "A"
      },
      {
        "name": "阿里",
        "key": "A"
      },
      {
        "name": "安康",
        "key": "A"
      },
      {
        "name": "安庆",
        "key": "A"
      },

      {
        "name": "鞍山",
        "key": "A"
      }
      ,
      {
        "name": "安顺",
        "key": "A"
      }
      ,
      {
        "name": "安阳",
        "key": "A"
      }
      ,
      {
        "name": "澳门",
        "key": "A"
      }
    ]
  }, {
    title: "B",
    item: [
      {
        "name": "北京",
        "key": "B"
      },
      {
        "name": "白银",
        "key": "B"
      },
      {
        "name": "保定",
        "key": "B"
      },
      {
        "name": "宝鸡",
        "key": "B"
      },
      {
        "name": "保山",
        "key": "B"
      },
      {
        "name": "包头",
        "key": "B"
      },
      {
        "name": "巴中",
        "key": "B"
      }
      ,
      {
        "name": "北海",
        "key": "B"
      }
      ,
      {
        "name": "蚌埠",
        "key": "B"
      }
      ,
      {
        "name": "本溪",
        "key": "B"
      }
      ,
      {
        "name": "毕节",
        "key": "B"
      }
      ,
      {
        "name": "滨州",
        "key": "B"
      }
      ,
      {
        "name": "百色",
        "key": "B"
      }
      ,
      {
        "name": "亳州",
        "key": "B"
      }
    ]
  }, {
    title: "C",
    item: [
      {
        "name": "重庆",
        "key": "C"
      },
      {
        "name": "成都",
        "key": "C"
      },
      {
        "name": "长沙",
        "key": "C"
      },
      {
        "name": "长春",
        "key": "C"
      },
      {
        "name": "沧州",
        "key": "C"
      },
      {
        "name": "常德",
        "key": "C"
      },
      {
        "name": "昌都",
        "key": "C"
      }
      ,
      {
        "name": "长治",
        "key": "C"
      }
      ,
      {
        "name": "常州",
        "key": "C"
      }
      ,
      {
        "name": "巢湖",
        "key": "C"
      }
      ,
      {
        "name": "潮州",
        "key": "C"
      }
      ,
      {
        "name": "承德",
        "key": "C"
      }
      ,
      {
        "name": "郴州",
        "key": "C"
      }
      ,
      {
        "name": "赤峰",
        "key": "C"
      }
      ,
      {
        "name": "池州",
        "key": "C"
      }
      ,
      {
        "name": "崇左",
        "key": "C"
      }
      ,
      {
        "name": "楚雄",
        "key": "C"
      }
      ,
      {
        "name": "滁州",
        "key": "C"
      }
      ,
      {
        "name": "朝阳",
        "key": "C"
      }
    ]
  }, {
    title: "D",
    item: [
      {
        "name": "大连",
        "key": "D"
      },
      {
        "name": "东莞",
        "key": "D"
      },
      {
        "name": "大理",
        "key": "D"
      },
      {
        "name": "丹东",
        "key": "D"
      },
      {
        "name": "大庆",
        "key": "D"
      },
      {
        "name": "大同",
        "key": "D"
      },
      {
        "name": "大兴安岭",
        "key": "D"
      }
      ,
      {
        "name": "德宏",
        "key": "D"
      }
      ,
      {
        "name": "德阳",
        "key": "D"
      }
      ,
      {
        "name": "德州",
        "key": "D"
      }
      ,
      {
        "name": "定西",
        "key": "D"
      }
      ,
      {
        "name": "迪庆",
        "key": "D"
      }
      ,
      {
        "name": "东营",
        "key": "D"
      }

    ]
  }, {
    title: "E",
    item: [
      {
        "name": "鄂尔多斯",
        "key": "E"
      }
      ,
      {
        "name": "恩施",
        "key": "E"
      }
      ,
      {
        "name": "鄂州",
        "key": "E"
      }
    ]
  }, {
    title: "F",
    item: [
      {
        "name": "福州",
        "key": "F"
      }
      ,
      {
        "name": "防城港",
        "key": "F"
      }
      ,
      {
        "name": "佛山",
        "key": "F"
      }
      ,
      {
        "name": "抚顺",
        "key": "F"
      }
      ,
      {
        "name": "抚州",
        "key": "F"
      }
      ,
      {
        "name": "阜新",
        "key": "F"
      }
      ,
      {
        "name": "阜阳",
        "key": "F"
      }
    ]
  }, {
    title: "G",
    item: [
      {
        "name": "广州",
        "key": "G"
      },
      {
        "name": "赣州",
        "key": "G"
      },
      {
        "name": "桂林",
        "key": "G"
      },
      {
        "name": "贵阳",
        "key": "G"
      },
      {
        "name": "甘南",
        "key": "G"
      },

      {
        "name": "甘孜",
        "key": "G"
      },
      {
        "name": "广安",
        "key": "G"
      }
      ,
      {
        "name": "广元",
        "key": "G"
      }
      ,
      {
        "name": "果洛",
        "key": "G"
      }
      ,
      {
        "name": "贵港",
        "key": "G"
      }

    ]
  }, {

    title: "H",
    item: [
      {
        "name": "杭州",
        "key": "H"
      },
      {
        "name": "哈尔滨",
        "key": "H"
      },
      {
        "name": "合肥",
        "key": "H"
      },
      {
        "name": "海口",
        "key": "H"
      },
      {
        "name": "海东",
        "key": "H"
      },
      {
        "name": "海北",
        "key": "H"
      },
      {
        "name": "海南",
        "key": "H"
      }
      ,
      {
        "name": "海西",
        "key": "H"
      }
      ,
      {
        "name": "邯郸",
        "key": "H"
      }

      ,
      {
        "name": "汉中",
        "key": "H"
      }
      ,
      {
        "name": "鹤壁",
        "key": "H"
      }
      ,
      {
        "name": "河池",
        "key": "H"
      }
      ,
      {
        "name": "鹤岗",
        "key": "H"
      }
      ,
      {
        "name": "黑河",
        "key": "H"
      }
      ,
      {
        "name": "衡水",
        "key": "H"
      }
      ,
      {
        "name": "衡阳",
        "key": "H"
      }

      ,
      {
        "name": "河源",
        "key": "H"
      }
      ,
      {
        "name": "贺州",
        "key": "H"
      }
      ,
      {
        "name": "红河",
        "key": "H"
      }
      ,
      {
        "name": "淮安",
        "key": "H"
      }
      ,
      {
        "name": "淮北",
        "key": "H"
      }
      ,
      {
        "name": "怀化",
        "key": "H"
      }
      ,
      {
        "name": "淮南",
        "key": "H"
      }
      ,

      {
        "name": "黄冈",
        "key": "H"
      }
      ,
      {
        "name": "黄南",
        "key": "H"
      }
      ,
      {
        "name": "黄山",
        "key": "H"
      },
      {
        "name": "黄石",
        "key": "H"
      },
      {
        "name": "惠州",
        "key": "H"
      },
      {
        "name": "葫芦岛",
        "key": "H"
      },
      {
        "name": "呼伦贝尔",
        "key": "H"
      },
      {
        "name": "湖州",
        "key": "H"
      }
      ,
      {
        "name": "菏泽",
        "key": "H"
      }

    ]
  }, {
    title: "J",
    item: [

      {
        "name": "济南",
        "key": "J"
      },
      {
        "name": "佳木斯",
        "key": "J"
      },
      {
        "name": "吉安",
        "key": "J"
      },
      {
        "name": "江门",
        "key": "J"
      },
      {
        "name": "焦作",
        "key": "J"
      },
      {
        "name": "嘉兴",
        "key": "J"
      },
      {
        "name": "嘉峪关",
        "key": "J"
      }
      ,
      {
        "name": "揭阳",
        "key": "J"
      }
      ,

      {
        "name": "吉林",
        "key": "J"
      }
      ,
      {
        "name": "金昌",
        "key": "J"
      }
      ,
      {
        "name": "晋城",
        "key": "J"
      }
      ,
      {
        "name": "景德镇",
        "key": "J"
      }
      ,
      {
        "name": "荆门",
        "key": "J"
      }
      ,
      {
        "name": "荆州",
        "key": "J"
      }
      ,
      {
        "name": "金华",
        "key": "J"
      }

      ,
      {
        "name": "济宁",
        "key": "J"
      }
      ,
      {
        "name": "晋中",
        "key": "J"
      }
      ,
      {
        "name": "锦州",
        "key": "J"
      }
      ,
      {
        "name": "九江",
        "key": "J"
      }
      ,
      {
        "name": "酒泉",
        "key": "J"
      }
    ]
  }, {
    title: "K",
    item: [
      {
        "name": "昆明",
        "key": "K"

      }
      ,
      {

        "name": "开封",
        "key": "K"
      }
    ]
  }, {

    title: "L",
    item:[
      {
        "name": "兰州",
        "key": "L"
      },
      {
        "name": "拉萨",
        "key": "L"
      },
      {
        "name": "来宾",
        "key": "L"
      },
      {
        "name": "莱芜",
        "key": "L"
      },
      {
        "name": "廊坊",
        "key": "L"
      },
      {
        "name": "乐山",
        "key": "L"
      },
      {
        "name": "凉山",
        "key": "L"
      }
      ,
      {
        "name": "连云港",
        "key": "L"
      }

      ,
      {
        "name": "聊城",
        "key": "L"
      }

      ,
      {
        "name": "辽阳",
        "key": "L"
      }
      ,
      {
        "name": "辽源",
        "key": "L"
      }
      ,
      {
        "name": "丽江",
        "key": "L"
      }
      ,
      {
        "name": "临沧",
        "key": "L"
      }
      ,
      {
        "name": "临汾",
        "key": "L"
      }
      ,
      {
        "name": "临夏",
        "key": "L"
      }
      ,

      {
        "name": "临沂",
        "key": "L"
      }

      ,
      {
        "name": "林芝",
        "key": "L"
      }
      ,
      {
        "name": "丽水",
        "key": "L"
      }
      ,
      {
        "name": "六安",
        "key": "L"
      }
      ,
      {
        "name": "六盘水",
        "key": "L"
      }
      ,
      {
        "name": "柳州",
        "key": "L"
      }
      ,
      {
        "name": "陇南",
        "key": "L"
      }
      ,

      {
        "name": "龙岩",
        "key": "L"
      }
      ,

      {
        "name": "娄底",
        "key": "L"
      }
      ,
      {
        "name": "漯河",
        "key": "L"
      }
      ,
      {
        "name": "洛阳",
        "key": "L"
      },
      {
        "name": "泸州",
        "key": "L"
      },
      {
        "name": "吕梁",
        "key": "L"
      }

    ]
  }, {

    title: "M",
    item: [
      {
        "name": "马鞍山",
        "key": "M"
      }
      ,
      {
        "name": "茂名",
        "key": "M"
      }
      ,
      {
        "name": "眉山",
        "key": "M"
      }
      ,
      {
        "name": "梅州",
        "key": "M"
      }
      ,
      {
        "name": "绵阳",
        "key": "M"
      }
      ,
      {
        "name": "牡丹江",
        "key": "M"
      }

    ]
  }, {
    title: "N",
    item: [

      {
        "name": "南京",
        "key": "N"
      },
      {
        "name": "南昌",
        "key": "N"
      },
      {
        "name": "南宁",
        "key": "N"
      },
      {
        "name": "南充",
        "key": "N"
      },
      {
        "name": "南平",
        "key": "N"
      },
      {
        "name": "南通",
        "key": "N"
      },
      {
        "name": "南阳",
        "key": "N"
      }
      ,
      {
        "name": "那曲",
        "key": "N"
      }

      ,
      {
        "name": "内江",
        "key": "N"
      }
      ,
      {
        "name": "宁德",
        "key": "N"
      }
      ,
      {
        "name": "怒江",
        "key": "N"
      }


    ]
  }, {
    title: "P",
    item: [

      {
        "name": "盘锦",
        "key": "P"
      }
      ,
      {
        "name": "攀枝花",
        "key": "P"
      }
      ,
      {
        "name": "平顶山",
        "key": "P"
      }
      ,
      {
        "name": "平凉",
        "key": "P"
      }
      ,
      {
        "name": "萍乡",
        "key": "P"
      }
      ,
      {
        "name": "莆田",
        "key": "P"
      }
      ,
      {
        "name": "濮阳",
        "key": "P"
      }

    ]
  }, {
    title: "Q",
    item:[

      {
        "name": "青岛",
        "key": "Q"
      },
      {
        "name": "黔东南",
        "key": "Q"
      },
      {
        "name": "黔南",
        "key": "Q"
      },
      {
        "name": "黔西南",
        "key": "Q"
      },
      {
        "name": "庆阳",
        "key": "Q"
      },
      {
        "name": "清远",
        "key": "Q"
      },
      {
        "name": "秦皇岛",
        "key": "Q"
      }
      ,
      {
        "name": "钦州",
        "key": "Q"
      }
      ,
      {
        "name": "齐齐哈尔",
        "key": "Q"
      }
      ,
      {
        "name": "泉州",
        "key": "Q"
      }
      ,
      {
        "name": "曲靖",
        "key": "Q"
      }
      ,
      {
        "name": "衢州",
        "key": "Q"
      }


    ]
  }, {

    title: "R",
    item: [
      {
        "name": "日喀则",
        "key": "R"
      },
      {
        "name": "日照",
        "key": "R"
      }
    ]
  }, {

    title: "S",
    item:[
      {
        "name": "上海",
        "key": "S"
      },
      {
        "name": "深圳",
        "key": "S"
      },
      {
        "name": "苏州",
        "key": "S"
      },
      {
        "name": "沈阳",
        "key": "S"
      },
      {
        "name": "石家庄",
        "key": "S"
      },
      {
        "name": "三门峡",
        "key": "S"
      },
      {
        "name": "三明",
        "key": "S"
      }
      ,
      {
        "name": "三亚",
        "key": "S"
      }

      ,
      {
        "name": "商洛",
        "key": "S"
      }

      ,
      {
        "name": "商丘",
        "key": "S"
      }
      ,
      {
        "name": "上饶",
        "key": "S"
      }
      ,
      {
        "name": "山南",
        "key": "S"
      }
      ,
      {
        "name": "汕头",
        "key": "S"
      }
      ,
      {
        "name": "汕尾",
        "key": "S"
      }
      ,
      {
        "name": "韶关",
        "key": "S"
      }
      ,

      {
        "name": "绍兴",
        "key": "S"
      }

      ,
      {
        "name": "邵阳",
        "key": "S"
      }
      ,
      {
        "name": "十堰",
        "key": "S"
      }
      ,
      {
        "name": "朔州",
        "key": "S"
      }
      ,
      {
        "name": "四平",
        "key": "S"
      }
      ,
      {
        "name": "绥化",
        "key": "S"
      }
      ,
      {
        "name": "遂宁",
        "key": "S"
      }
      ,

      {
        "name": "随州",
        "key": "S"
      }
      ,

      {
        "name": "娄底",
        "key": "S"
      }
      ,
      {
        "name": "宿迁",
        "key": "S"
      }
      ,
      {
        "name": "宿州",
        "key": "S"
      }

    ]
  }, {
    title: "T",
    item: [

      {
        "name": "天津",
        "key": "T"
      },
      {
        "name": "太原",
        "key": "T"
      },
      {
        "name": "泰安",
        "key": "T"
      },
      {
        "name": "泰州",
        "key": "T"
      },
      {
        "name": "唐山",
        "key": "T"
      },
      {
        "name": "天水",
        "key": "T"
      },
      {
        "name": "铁岭",
        "key": "T"
      }
      ,
      {
        "name": "铜川",
        "key": "T"
      }
      ,

      {
        "name": "通化",
        "key": "T"
      }
      ,
      {
        "name": "通辽",
        "key": "T"
      }
      ,
      {
        "name": "铜陵",
        "key": "T"
      }
      ,
      {
        "name": "铜仁",
        "key": "T"
      }
      ,
      {
        "name": "台湾",
        "key": "T"
      }


    ]
  }, {
    title: "W",
    item: [

      {
        "name": "武汉",
        "key": "W"
      },
      {
        "name": "乌鲁木齐",
        "key": "W"
      },
      {
        "name": "无锡",
        "key": "W"
      },
      {
        "name": "威海",
        "key": "W"
      },
      {
        "name": "潍坊",
        "key": "W"
      },
      {
        "name": "文山",
        "key": "W"
      },
      {
        "name": "温州",
        "key": "W"
      }
      ,
      {
        "name": "乌海",
        "key": "W"
      }
      ,

      {
        "name": "芜湖",
        "key": "W"
      }
      ,
      {
        "name": "乌兰察布",
        "key": "W"
      }
      ,
      {
        "name": "武威",
        "key": "W"
      }
      ,
      {
        "name": "梧州",
        "key": "W"
      }

    ]
  }, {
    title: "X",
    item: [

      {
        "name": "厦门",
        "key": "X"
      },
      {
        "name": "西安",
        "key": "X"
      },
      {
        "name": "西宁",
        "key": "X"
      },
      {
        "name": "襄樊",
        "key": "X"
      },
      {
        "name": "湘潭",
        "key": "X"
      },
      {
        "name": "湘西",
        "key": "X"
      },
      {
        "name": "咸宁",
        "key": "X"
      }
      ,
      {
        "name": "咸阳",
        "key": "X"
      }
      ,

      {
        "name": "孝感",
        "key": "X"
      }
      ,
      {
        "name": "邢台",
        "key": "X"
      }
      ,
      {
        "name": "新乡",
        "key": "X"
      }
      ,
      {
        "name": "信阳",
        "key": "X"
      }
      ,
      {
        "name": "新余",
        "key": "X"
      }
      ,
      {
        "name": "忻州",
        "key": "X"
      }
      ,
      {
        "name": "西双版纳",
        "key": "X"
      }

      ,
      {
        "name": "宣城",
        "key": "X"
      }
      ,

      {
        "name": "许昌",
        "key": "X"
      }
      ,
      {
        "name": "徐州",
        "key": "X"
      }
      ,
      {
        "name": "香港",
        "key": "X"
      }
      ,
      {
        "name": "锡林郭勒",
        "key": "X"
      }
      ,
      {
        "name": "兴安",
        "key": "X"
      }
    ]
  }, {
    title: "Y",
    item: [

      {
        "name": "银川",
        "key": "Y"
      },
      {
        "name": "雅安",
        "key": "Y"
      },
      {
        "name": "延安",
        "key": "Y"
      },
      {
        "name": "延边",
        "key": "Y"
      },
      {
        "name": "盐城",
        "key": "Y"
      },
      {
        "name": "阳江",
        "key": "Y"
      },

      {
        "name": "阳泉",
        "key": "Y"
      }
      ,
      {
        "name": "扬州",
        "key": "Y"
      }
      ,

      {
        "name": "烟台",
        "key": "Y"
      }
      ,
      {
        "name": "宜宾",
        "key": "Y"
      }
      ,
      {
        "name": "宜昌",
        "key": "Y"
      }
      ,
      {
        "name": "宜春",
        "key": "Y"
      }
      ,
      {
        "name": "营口",
        "key": "Y"
      }
      ,

      {
        "name": "益阳",
        "key": "Y"
      }
      ,
      {
        "name": "永州",
        "key": "Y"
      }

      ,
      {
        "name": "岳阳",
        "key": "Y"
      }
      ,

      {
        "name": "榆林",
        "key": "Y"
      }
      ,
      {
        "name": "运城",
        "key": "Y"
      }
      ,
      {
        "name": "云浮",
        "key": "Y"
      }
      ,
      {
        "name": "玉树",
        "key": "Y"
      }
      ,
      {
        "name": "玉溪",
        "key": "Y"
      }
      ,
      {
        "name": "玉林",
        "key": "Y"
      }

    ]
  }, {

    title: "Z",
    item: [
      {
        "name": "中山",
        "key": "Z"
      },
      {
        "name": "珠海",
        "key": "Z"
      },
      {
        "name": "杂多县",
        "key": "Z"
      },
      {
        "name": "赞皇县",
        "key": "Z"
      },
      {
        "name": "枣强县",
        "key": "Z"
      },
      {
        "name": "枣阳市",
        "key": "Z"
      },
      {
        "name": "枣庄",
        "key": "Z"
      },
      {
        "name": "泽库县",
        "key": "Z"
      },
      {
        "name": "增城市",
        "key": "Z"
      }
      ,

      {
        "name": "曾都区",
        "key": "Z"
      }
      ,
      {
        "name": "泽普县",
        "key": "Z"
      }

      ,
      {
        "name": "泽州县",
        "key": "Z"
      }
      ,
      {
        "name": "札达县",
        "key": "Z"
      }
      ,
      {
        "name": "扎赉特旗",
        "key": "Z"
      }
      ,
      {
        "name": "扎兰屯市",
        "key": "Z"
      }
      ,
      {
        "name": "扎鲁特旗",
        "key": "Z"
      }
      ,

      {
        "name": "扎囊县",
        "key": "Z"
      }
      ,
      {
        "name": "张北县",
        "key": "Z"
      }

      ,
      {
        "name": "张店区",
        "key": "Z"
      }
      ,
      {
        "name": "章贡区",
        "key": "Z"
      }
      ,
      {
        "name": "张家港",
        "key": "Z"
      }
      ,
      {
        "name": "张家界",
        "key": "Z"
      }
      ,
      {
        "name": "张家口",
        "key": "Z"
      }
      ,
      {
        "name": "漳平市",
        "key": "Z"
      }
      ,

      {
        "name": "漳浦县",
        "key": "Z"
      }
      ,

      {
        "name": "章丘市",
        "key": "Z"
      }
      ,
      {
        "name": "樟树市",
        "key": "Z"
      }
      ,
      {
        "name": "张湾区",
        "key": "Z"
      },
      {
        "name": "彰武县",
        "key": "Z"
      },
      {
        "name": "漳县",
        "key": "Z"
      },
      {
        "name": "张掖",
        "key": "Z"
      },
      {
        "name": "漳州",
        "key": "Z"
      },
      {
        "name": "长子县",
        "key": "Z"
      }
      ,

      {
        "name": "湛河区",
        "key": "Z"
      }
      ,
      {
        "name": "湛江",
        "key": "Z"
      }
      ,

      {
        "name": "站前区",
        "key": "Z"
      }
      ,
      {
        "name": "沾益县",
        "key": "Z"
      }
      ,
      {
        "name": "诏安县",
        "key": "Z"
      },
      {
        "name": "召陵区",
        "key": "Z"
      },
      {
        "name": "昭平县",
        "key": "Z"
      },
      {
        "name": "肇庆",
        "key": "Z"
      },
      {
        "name": "昭通",
        "key": "Z"
      },
      {
        "name": "赵县",
        "key": "Z"
      }

    ]
  }
]

module.exports = city;

address组件部分

该组件的wxml,wxss部分,这里就不多讲话了,下面直接给代码吧,这里讲一下js跟config部分。
js这里就两个核心点,1、处理index页面携带进来的数据(即组件初始化数据),2、将选中的城市抛出去,记录历史选中城市。
一、config.wxs

module.exports = {
  horizontal: true, // 第二个选项是否横排显示(一般第一个数据选项为 热门城市,常用城市之类 ,开启看需求)
  animation:true ,// 过渡动画是否开启
  search:true ,// 是否开启搜索
  history:true ,// 是否开启历史访问城市
  searchBtn:false ,// 是否存在搜索按钮
};

二、address.js
初始数据处理:这里只需将所有城市的json赋值给list便可。

	  let rightArr = []
      for (let i in data) {
        rightArr.push(data[i].title.substr(0, 1));
      }
      this.setData({
        list: data,
        rightArr
      })

历史访问数据处理

		let detail = e.currentTarget.dataset.detail;
		this.triggerEvent('detail', detail, myEventOption);
      if(wx.getStorageSync('historyAddress')){
        var arr = wx.getStorageSync('historyAddress');
        for(var i=0;i<arr.length;i++){ 	
          if(arr[i].name==detail.name){//这里主要将以前访问过的,又重新选中的放到最前面
            var arr1 = arr[i];
            var arr2 = arr[0];
            var arr3 = [];
            arr3 = arr1; 
            arr[i] = arr[0];
            arr[0] = arr3;
            wx.setStorageSync('historyAddress',arr)
            break;
          }
          if(i==arr.length-1){ //如果选中的这个城市以前没访问过,这记录下来
            arr = prepend(arr,detail); 
            wx.setStorageSync('historyAddress',arr);
            function prepend(arr, item) {
                 //将arr数组复制给a
                 var a = arr.slice(0);
                 //使用unshift方法向a开头添加item
                 a.unshift(item);
                 return a;
             }
            break;
          }
        }
      }else{
        var newArr = [];
        newArr.push(detail);
        wx.setStorageSync('historyAddress',newArr)
      }

搜索:

_search(){
      console.log("搜索")
      let data = this.data.data;
      let newData = [];
      for (let i = 0; i < data.length; i++) {
        let itemArr = [];
        for (let j = 0; j < data[i].item.length; j++) {
          if (data[i].item[j].name.indexOf(this.value) > -1) {
            let itemJson = {};
            for (let k in data[i].item[j]) {
              itemJson[k] = data[i].item[j][k];
            }
            itemArr.push(itemJson);
          }
        }
        if (itemArr.length === 0) {
          continue;
        }
        newData.push({
          title: data[i].title,
          type: data[i].type ? data[i].type : "",
          item: itemArr
        })
      }
      this.resetRight(newData);
    },

完整js代码


Component({
  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { 
        this.resetRight(newVal);
        if(wx.getStorageSync('historyAddress')){
          this.setData({
            historyAddress:wx.getStorageSync('historyAddress')
          })
        }
      }
    },
    myCity: {
      type: String,
      value: "",
    },
    // 用于外部组件搜索使用
    search:{
      type:String,
      value:"",
      observer: function (newVal, oldVal) { 
        console.log(newVal)
        this.value = newVal;
        this.searchMt();
      }
    }
  },

  data: {
    inputValue: '',
    list: [],
    rightArr: [],// 右侧字母展示
    jumpNum: '',//跳转到那个字母
    myCityName: '请选择', // 默认我的城市
    screenHeight:wx.getSystemInfoSync().screenHeight,
    historyAddress:null,
  },
  ready() {
    let data = this.data.data;
    this.resetRight(data);
    if (this.data.myCity) {
      this.getCity()
    }
  },
  methods: {
    // 数据重新渲染
    resetRight(data) {
      let rightArr = []
      for (let i in data) {
        rightArr.push(data[i].title.substr(0, 1));
      }
      this.setData({
        list: data,
        rightArr
      })
    },
    getCity() {
      var _this = this;
      wx.getLocation({
        type: 'wgs84',
        success: function (res) {
          _this.latitude = res.latitude;
          _this.longitude = res.longitude;
          console.log(res)
        }
      })
    },
    // 右侧字母点击事件
    jumpMt(e) {
      let jumpNum = e.currentTarget.dataset.id;
      this.setData({jumpNum:jumpNum});
      console.log(this.data.jumpNum,'jumpNum')
    },
    // 列表点击事件
    detailMt(e) {
      let detail = e.currentTarget.dataset.detail;
      if(e.currentTarget.dataset.mycity){
        var mycity = {
          name:detail,
          key:'我的城市'
        }
        detail = mycity
      }
      
      let myEventOption = {
        bubbles: false,//事件是否冒泡
        composed: false,//事件是否可以穿越组件边界
        capturePhase: false //事件是否拥有捕获阶段
      } // 触发事件的选项
      this.triggerEvent('detail', detail, myEventOption);
      console.log(detail,'detail');
      if(wx.getStorageSync('historyAddress')){
        var arr = wx.getStorageSync('historyAddress');
        for(var i=0;i<arr.length;i++){
          if(arr[i].name==detail.name){
            var arr1 = arr[i];
            var arr2 = arr[0];
            var arr3 = [];
            arr3 = arr1; 
            arr[i] = arr[0];
            arr[0] = arr3;
            wx.setStorageSync('historyAddress',arr)
            break;
          }
          if(i==arr.length-1){
            // var aa= [
            //   {name:detail.name,key:detail.key}
            // ];
            // aa.push(detail)
            // arr[arr.length] = detail; 
            arr = prepend(arr,detail); 
            wx.setStorageSync('historyAddress',arr);
            function prepend(arr, item) {
                 //将arr数组复制给a
                 var a = arr.slice(0);
                 //使用unshift方法向a开头添加item
                 a.unshift(item);
                 return a;
             }
            break;
          }
        }
      }else{
        var newArr = [];
        newArr.push(detail);
        wx.setStorageSync('historyAddress',newArr)
      }
      
      // wx.setStorageSync('historyAddress',_this.data.myConcern);
    },
    // 获取搜索输入内容
    input(e) {
      this.value = e.detail.value;
      this._search();
      this.setData({
        inputValue:e.detail.value
      })
    },
    clear() {
      this.value = '';
      this.setData({
        inputValue:''
      })
      this._search();
    },
    // 基础搜索功能
    searchMt() {
      this._search();
    },
    _search(){
      console.log("搜索")
      let data = this.data.data;
      let newData = [];
      for (let i = 0; i < data.length; i++) {
        let itemArr = [];
        for (let j = 0; j < data[i].item.length; j++) {
          if (data[i].item[j].name.indexOf(this.value) > -1) {
            let itemJson = {};
            for (let k in data[i].item[j]) {
              itemJson[k] = data[i].item[j][k];
            }
            itemArr.push(itemJson);
          }
        }
        if (itemArr.length === 0) {
          continue;
        }
        newData.push({
          title: data[i].title,
          type: data[i].type ? data[i].type : "",
          item: itemArr
        })
      }
      this.resetRight(newData);
    },
    // 城市定位
    locationMt() {

      // 定位自己的城市,需要引入第三方api
    }

  }
})

`wxml,这部分包括,城市搜索,我的城市,历史访问城市,热门城市推荐,城市字母选择,城市列表。其中搜索,历史访问城市,热门城市以及过度动画是否开启,这些都做在config.wxs中。

<wxs src="config.wxs" module="config" />

<view class='list-warpper'>
  <view wx:if="{{config.search}}" class='list-search'>
    <view class='list-search-box'>
      <icon type="search" size="15" color="#d1dbf6" />
      
      <input placeholder-style="color:white;font-size:30rpx;" placeholder="输入您要搜索的城市" bindinput='input' value="{{inputValue}}"/>
      <icon bindtap="clear" type="clear" size="15" color="#d1dbf6" />
    </view>
    <button wx:if="{{config.searchBtn}}" class='search-button' catchtap='searchMt'>搜索</button>
  </view>
  
  <block wx:if="{{list.length != 0 }}">
    <scroll-view style="height: {{screenHeight*0.95}}px;" class="list-scroll {{config.search?'top':''}}" scroll-y="true" scroll-into-view="{{jumpNum}}" scroll-with-animation="{{config.animation}}">
      <view class="line-h30" style=""></view>
      <!-- 我的位置  -->
      <view wx:if="{{myCity}}">
        <view class='list-horizontal myaddress'>
          <view class="wh40" style="">
            <image class="wh100" mode="aspectFit" src="/image/address.png"></image>
          </view>
          <view class='myaddressText' data-detail="{{myCity}}" data-mycity='1' catchtap='detailMt'>
            {{myCity}}
          </view>
          <view class="mt14">GPS定位</view>
        </view>
      </view>

      <!-- 历史访问城市 -->
      <view wx:if="{{historyAddress&&config.history}}">
        <view class='list-title'>历史访问城市</view>
        <view class='list-horizontal'>
          <view class='list-name border' wx:for="{{historyAddress}}" wx:for-item="history" wx:for-index="idx" wx:key="history" data-detail="{{history}}" catchtap='detailMt'>
            {{history.name}}
          </view>
        </view>
      </view>

      <!-- 热门搜索&所有城市 -->
      <view id="{{'index'+index}}" wx:for="{{list}}" wx:key="key">
        <view class='list-title'>{{item.title}}</view>
        <view class='{{index===0&&config.horizontal&&item.type==="hot"?"list-horizontal":""}}'>
          <view class='list-name {{idx === 0 ?"":"border"}}' wx:for="{{item.item}}" wx:for-item="city" wx:for-index="idx" wx:key="city" data-detail="{{city}}" catchtap='detailMt'>
            {{city.name}}
          </view>
        </view>
        <view wx:if="{{index===0}}" class="line-h30"></view>
      </view>

    </scroll-view>
    <view class='list-right-wrapper'>
      <view class='right-item' wx:for="{{rightArr}}" wx:key="rightArr" data-id="{{'index'+index}}" catchtap='jumpMt'>
        {{rightArr[index]}}
      </view>
    </view>
  </block>
  <block wx:else>
    <view class='nodata'>暂无更多数据</view>
  </block>
</view>

wxss部分

page{
  height:100%;
  width:100%;
}
.wh100{
  width:100%;
  height:100%;
}
.list-warpper {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.list-scroll {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.list-scroll.top{
  padding-top: 90rpx;
}

/* 样式控制  */

.list-title {
  background: #fff;
  color: #999;
  font-size: 28rpx;
  padding: 10rpx;
  padding-left: 30rpx;
  padding-top: 15rpx;
}

.list-name {
  position: relative;
  font-size: 28rpx;
  padding: 30rpx;
  padding-left: 30rpx;
  color: #444;
}

.list-name.border::after {
  content: "";
  position: absolute;
  left: 30rpx;
  right: 0;
  top: 0;
  height: 1px;
  background: #f5f5f5;
}

.list-right-wrapper {
  position: fixed;
  top: 12%;
  right: 2rpx;
  padding: 10rpx;
  border-radius: 20rpx;
  z-index: 2;
  height: 80%;
  overflow: auto;
  /* background: #ddd; */
}

.right-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rpx 10rpx;
  font-size: 25rpx;
  color: #666;
}

.list-search {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  /* height: 90rpx; */
  padding: 10rpx 30rpx;
  box-sizing: border-box;
  z-index: 20;
  background: #3e67d9;
  padding-bottom: 20rpx;
}

.search-title {
  flex-shrink: 0;
  font-size: 28rpx;
  padding-right: 10rpx;
}

.list-search-box {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  width: 100%;
  height: 70rpx;
  background: #6585e1;
  border-radius: 90rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

  .list-search-box input {
  width: 100%;
  padding-left: 10rpx;
  color: white;
}

.search-button {
  /* width: 100rpx; */
  flex-shrink: 0;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  margin-left: 10rpx;
  color:white;
}

/* 热门城市横排显示样式  */

.list-horizontal {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 30rpx;
  padding-right: 50rpx;
  align-items:center;
}

.list-horizontal .list-name{
  border:1rpx #ddd solid;
  border-radius:5rpx;
  margin-right:3%;
  width:29%;
  text-align:center;
  padding:15rpx 0;
  margin-bottom:25rpx;
  font-size:30rpx;
  color:#333;
  position: static;

}


/* 无数据  */
.nodata {
  padding-top: 200rpx;
  text-align: center;
  font-size: 32rpx;
  color: #ddd;
}

.wh40{
  width: 40rpx;
  height: 40rpx;
}
.myaddress{
  padding: 20rpx 0;
  margin: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 30rpx;
  color: #999;
}
.line-h30{
  width: 100%;
  height: 30rpx;
  background: #f7f7f7;
}
.myaddressText{
  font-size: 40rpx;
  color: #000;
  margin: 0 15rpx;
}
.mt14{
  margin-top:14rpx;
}
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页