小程序城市选择自定义组件
针对微信小程序选择城市这块，本文开发的小程序为开发提供者一个参考，注意：如果不了解如何使用微信小程序自定义组件的，建议先看一下官方说明：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
前言
类似功能的小程序也有挺多，其实都是大同小异，有部分样式是参考其他小程序，该小程序还在开发中，还有很多没有完善…
有问题关注公众号回复：'微信’，加我微信，备注“公众号”。
文件目录
- components
- address
- address.js //自定义组件逻辑处理
- address.json
- address.wxml //自定义组件视图
- address.wxss //自定义组件样式文件
- config.wxs //小程序脚本配置文件
- address
- pages
- index
- index.js
- index.json
- index.wxml
- index.wxss
- index
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;
}
3937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
