uniapp 微信小程序城市索引列表

原创

已于 2023-06-20 08:47:26 修改 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序

于 2023-06-19 12:39:10 首次发布

本文介绍如何利用uni-app和uview的IndexList组件创建自定义的城市列表页面，以满足项目中对城市切换的需求。通过一次性获取城市数据并存储在本地，减少了对后端的请求。页面结构包括address.vue，使用了QQMapWX腾讯地图SDK，并自定义了navBar导航栏。同时，还提供了自定义热门城市列表的选项。

最近做的一个项目需要频繁用到城市列表切换，切换城市，腾讯地图虽然有地图列表,但是效果不是自己项目想要的，于是就结合结合uview的IndexList 索引列表重新做了一个城市列表的页面

效果图：

页面结构：address.vue

/**
*
* name: 城市列表选择
* @property {Array}  data: hotCity 热门城市 eg: <!-- ['北京', '上海', '天津', '重庆', '广州', '深圳', '成都', '杭州'] -->
* @property {Array} cityList 全国市 eg: 这是我项目的城市数据
<!-- [{data:[{carNumber: "川U",code: "513200",fullName: "阿坝藏族羌族自治州",fullNameAbbrPinYin:"ABZZQZZZZ",parentCode: "510000",shortName: "阿坝藏族羌族自治州",type: 3}],letter: "A"}] -->
* @property {Array}  indexList 索引 eg: ["A","B", "C", ....]
*/
<template>
	<view class="content" style="height: calc(100vh - 40rpx); overflow: hidden;">
		<navBar :item='{leftText:leftText,leftIcon:leftIcon,leftIconColor:leftIconColor, navTitle: navTitle,
			bgColor:bgColor}'></navBar>
		<!-- 搜素 -->
		<view class="search-city">
			<u-search v-model="searchValue" bgColor="#fff" placeholderColor="#CECCCC" :showAction="true" @change="changeClick"
				actionText="搜索" :animation="false" clearabled @custom="customClick"></u-search>
		</view>
		<view v-if="searchValue" style="height: calc(100vh - 40rpx - 64px - 34px);overflow-y: scroll">
			<view v-if="searchArr.length > 0">
				<view class="list-cell" :class="searchArr.len