uniapp城市选择器

在这里插入图片描述
样式是这样
这样
这样放

selectCity.vue

<template>
	<view>
		<!-- <view class="header w100 flexw" :style="{height:customBar}">
			<view class="placeholder" :style="{height:statusBar}"></view>
			<view class="flex w100"> 
				<input class="input" :focus="true" @confirm="doneInput"  type="text"  confirm-type="search"  :adjust-position="false"  @input="onInput" placeholder="搜索城市 中文/首字母" v-model="searchValue" />
				<view class="back_div fsmall bold blue" @tap="back()">
					搜索
				</view>
			</view>
		</view> -->
		
		
		<view class="" style="width: 90%;margin-left: 5%;margin-top: 15px;">
			<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="searchKw" placeholder="请输入关键字" @iconClick="iconClick"></uni-easyinput>
		</view>

		<scroll-view class="w100" scroll-y="true" :scroll-into-view="scrollIntoId" :style="{height:scrollHeight}"
			@touchmove.stop.prevent>
			<view v-if="disdingwei" id="hot">
				<!-- 定位模块 -->
				<view class="dingwei">
					<view class="grey flexa fsmall">
						当前定位城市
					</view>
					<view class="dingwei_city">
						<view class="dingwei_city_one" @click="backCitys(position)">
							{{position?position.city:'定位失败'}}
						</view>
						<view class="bold blue fmiddle" @click="getNowCity">
							<text style="color:#6a7ef8 ;">{{po_tips}}</text>
						</view>
					</view>
				</view>

				<!-- 最近模块 -->
				<!-- 			<view class="dingwei" v-if="cacheLocation">
					<view class="grey flexa fsmall">
						历史浏览城市
					</view>
					<view class="dingwei_city dingwei_city_zuijin">
						<view class="dingwei_city_one" v-for="(item,index) in cacheLocation" :key="index"   @tap="back_city(item)">
							{{item.city_name}}
						</view>
					</view>
				</view> -->


				<!-- 热门 -->
				<!-- 			<view class="dingwei" v-if="hotCity">
					<view class="grey flexa fsmall">
						热门城市
					</view>
					<view class="dingwei_city dingwei_city_zuijin">
						<view class="dingwei_city_one" v-for="(item,index) in hotCity" :key="index"   @tap="back_city(item)">
							{{item.city_name}}
						</view>
					</view>
				</view> -->

			</view>
			<!-- 搜索结果列表 -->
			<view class="" style="margin-left: 10px;" v-for="item in citysAll">
			<view class="" @click="backPosition(item)">
					{{item}}
			</view>
				
			</view>


			<!-- 城市列表 -->
	
		<view  v-if="showCity" v-for="(item, index) in list" :id="item.idx" :key="item.idx">
			<view class="letter-header bold">{{ item.idx }}</view>
			<view class="contents">
				<view class="city-div" v-for="(city, i) in item['cities']" :key="i" @click="chatCity(city)">
					<text class="city">{{ city.city_name }}</text>
				</view>
			</view>
		
		</view>
	
			<!-- 搜索结果 -->
			<!-- 	<view class="city-div" v-for="(item, index) in searchList" :key="index" @tap="back_city(item)">
				<text class="city">{{ item.city_name }}</text>
			</view> -->

			<view class="placeholder footer"></view>
		</scroll-view>

		<!-- 右侧字母 -->
		<view   class="letters" id="list" v-if="searchValue == ''" @touchstart="touchStart"
			@touchmove.stop.prevent="touchMove" @touchend="touchEnd">
			<!-- <view class="fmin" @click="scrollTo('hot')">最近</view> -->
			<view  v-if="showCity" class="fmin" v-for="item in letter" :key="item.idx">{{ item.idx }}</view>
		</view>

		<!-- 选中之后字母 -->
		<view class="mask" v-if="touchmove">
			<view class="mask-r bold">{{scrollIntoId}}</view>
		</view>
	</view>
</template>

<script>
	import Citys from '@/pages/searchCity/city.js';
	export default {

		data() {
			return {
				showCity:true,
				searchKw:'',
				citysAll: [],
				statusBar: '0px',
				customBar: '45px',

				winHeight: 0,
				itemHeight: 0,
				winOffsetY: 0,
				touchmove: false,


				scrollHeight: this.statusBarHeight,
				ImgUrl: this.ImgUrl,
				letter: [],

				searchValue: '',
				scrollIntoId: '',
				list: [],
				tId: null,
				searchList: [],
				showMask: false,
				disdingwei: true,
				cacheLocation: [{
					'city_name': '北京'
				}], //最近访问
				position: {}, //定位获取的位置

				po_tips: '重新定位',
				hotCity: [{
					'city_name': '济南'
				}]
			}
		},
		watch: {
			list() {
				setTimeout(() => {
					this.setList()
				}, 100)
			}
		},

		onLoad() {
			this.citysAll=[]
			// console.log(this.citysAll.length,'aaaaaaaaaaaaaaaaaaaaaaaa');
			this.scrollHeight = uni.getSystemInfoSync().windowHeight - parseInt(this.customBar) + 'px'
			//获取存储的最近访问
			var that = this
			// uni.getStorage({
			// 	key: 'location_key',
			// 	success: function(res) {
			// 		that.cacheLocation = res.data
			// 	}
			// });
			// //获取定位 经度纬度
			// that.getWarpweft()

			// let cityLen = Citys.data.city_nav
			this.letter = Citys.index;
			this.list = Citys.list;
			// this.hotCity = Citys.data.hot_city; 
			this.getNowCity()

			// this.getAlls()
		},
		methods: {
			backPosition(e){
				uni.navigateTo({
					url:'/pages/shop/shop?citys='+e
				})
				// console.log(e);
			},
			async iconClick(){
				if(this.searchKw==''){
					this.citysAll=[]
					this.showCity=true
				}else{
					await this.getAlls()
				}
				
				console.log(this.citysAll);
				if(this.citysAll.length==0){
					this.showCity=true
				}else{
					this.showCity=false
				}
				
			},
			 getAlls() {
		         this.citysAll=[]
				Citys.list.forEach(res => {
					// console.log(res.cities);
					var value= res.cities.find(item=>item.city_name.includes(this.searchKw))?.city_name
					if(value==undefined){
						
					}else{
						this.citysAll.push(value)
					}
					 // console.log(value,'aaaaaaaaaaa');
				}) 
			},
			backCitys(e) {
				uni.navigateTo({
					url:'/pages/shop/shop?citys='+e.city
				})
				console.log(e);
			},
			getNowCity() {
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?coord_type=5&get_poi=0&output=json&key=MASBZ-BHQWU-MTEV7-GM3HH-JUC53-ASBCA&location=36.83834%2C115.70504',
					method: 'get',
					success: (res) => {
						console.log(res.data.result.address_component.city);
						this.position.city = res.data.result.address_component.city
					}
				})
			},
			chatCity(e) {
				uni.navigateTo({
					url:'/pages/shop/shop?citys='+e.city_name
				})
				// console.log(e.city_name);

			},
			back() {
				//你自己实现 返回上一页
			},
			setList() {
				uni.createSelectorQuery()
					.in(this)
					.select('#list')
					.boundingClientRect()
					.exec(ret => {
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.list.length
					})

			},
			touchStart(e) {
				this.touchmove = true
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
				if (this.list[index]) {
					this.scrollIntoId = this.list[index].idx
				}
			},
			touchMove(e) {
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
				if (this.list[index] && this.list[index].idx === this.scrollIntoId) {
					return false
				}
				if (this.list[index]) {
					this.scrollIntoId = this.list[index].idx
				}
			},
			touchEnd() {
				this.touchmove = false
				this.touchmoveIndex = -1
			},

			doneInput() {
				uni.hideKeyboard()
			},
			move(e) {
				console.log(111, e);
			},
			getId(index) {
				return this.letter[index];
			},
			query(source, text) {
				let res = [];
				var self = this;
				let len = source.length
				var text = text.toLowerCase()
				for (let i = 0; i < len; i++) {
					//单字母搜索
					if (text.length == 1 && /^[a-zA-Z]$/.test(text)) {
						let arr = []
						let idx = text.toUpperCase()
						if (idx == source[i].idx) {
							console.log(222, source[i]);
							return source[i].cities
						}
					}
					//其它搜索
					if (source[i].cities) {
						let _len = source[i].cities.length
						for (var n = 0; n < _len; n++) {
							let _item = source[i].cities[n]
							if (new RegExp('^' + text).test(_item.city_name)) {
								res.push(_item);
								continue;
							}
							if (new RegExp('^' + text).test(_item.city_pinyin)) {
								res.push(_item);
								continue;
							}
							if (new RegExp('^' + text).test(_item.py)) {
								res.push(_item);
								continue;
							}

						}
					}
				}

				return res;
			},

			isString(obj) {
				return typeof obj === 'string';
			},

			onInput(e) {
				const value = e.target.value;
				if (value !== '' && this.list) {
					const queryData = this.query(this.list, String(value).trim());
					this.searchList = queryData;
					this.disdingwei = false
				} else {
					this.searchList = [];
					this.disdingwei = true
				}
			},

			back_city(item, hasLocation = false) {
				console.log(3334, item);
				this.$store.commit('getCity', item.city_name)
				uni.switchTab({
					url: '/pages/home/index'
				})
				if (item) {
					//是否是定位 
					if (hasLocation) {
						item = {
							city_name: item.city,
							location: item
						}
					}
					uni.$emit('selectCity', item);
					//unshift 把数据插入到首位,与push相反
					if (!this.cacheLocation) this.cacheLocation = []
					this.cacheLocation.unshift(item)
					this.searchValue = "";
					this.disdingwei = true
					var arr = this.cacheLocation
					//数组去重
					function distinct(arr) {
						let newArr = []
						for (let i = 0; i < arr.length; i++) {
							if (newArr.indexOf(arr[i]) < 0) {
								newArr.push(arr[i])
							}
						}
						return newArr
					}
					this.cacheLocation = distinct(arr).slice(0, 5)
					uni.setStorage({
						key: 'location_key',
						data: this.cacheLocation
					});
				}
				this.back()
			},
			getWarpweft() {
				console.log('0000000')
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log('当前位置:' + res.address.city);
						this.city = res.address.city || '郑州'
					}
				});
				// //自己写吧
				// var that = this
				// that.po_tips = '定位中...'
				// setTimeout(()=>{
				// 	that.po_tips = '定位失败'
				// }) 
			}
		}
	};
</script>

<style scoped>
	.fsmall {
		font-size: 26rpx;
	}

	.fmiddle {
		font-size: 28rpx;
	}

	.blue {
		color: #007AFF;
	}

	.bold {
		/* font-weight: 600; */
		color: #ccc;
		margin: 20rpx 20rpx 20rpx 0;
		line-height: 60rpx;
	}

	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mask {
		position: fixed;
		z-index: 3;
		top: 40%;
		left: 40%;
	}

	.mask-r {
		height: 120rpx;
		width: 120rpx;
		border-radius: 60rpx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(5px);
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #FFFFFF
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}

	.header {
		width: 100%;
		position: relative;
		z-index: 8;
		background-color: #FFFFFF;
	}


	.back_div {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back_img {
		width: 35rpx;
		height: 35rpx;
	}

	.input {
		font-size: 26rpx;
		width: 600rpx;
		height: 60rpx;
		max-height: 60rpx;
		border-radius: 10rpx;
		background-color: #F5F5F5;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 30rpx;
		color: white;
	}

	.show {
		left: 0;
		width: 100%;
		transition: left 0.3s ease;
	}

	.hide {
		left: 100%;
		width: 100%;
		transition: left 0.3s ease;
	}


	.title {
		font-size: 30rpx;
		color: white;
	}

	.letters {
		position: absolute;
		right: 0;
		width: 50rpx;
		color: #cccccc;
		top: 25%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 510;
	}

	.letters .fmin {}


	.letter-header {
		font-size: 28rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

	}

	.city-div {
		/* display: inline-block; */
		/* width: 660rpx; */
		margin: auto;
		padding: 20rpx 0;
		/* border-bottom-width: 0.5rpx; */
		/* border-bottom-color: #ebedef; */
		/* border-bottom-style: solid; */
		/* display: flex; */
		align-items: center;
	}

	.city {
		font-size: 28rpx;
		color: #000000;
		padding-left: 30rpx;
	}

	.dingwei {
		/* 	width: 90%;
		margin: auto; */
		padding-top: 25rpx;
		box-sizing: border-box;
		margin-bottom: 26rpx;
	}

	.dingwei .grey {
		margin-bottom: 25rpx;
		margin-left: 30rpx;
	}

	.dingwei_city {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #fff;
	}

	.dingwei_city_one {
		height: 60rpx;
		/* background-color: #F5F5F5; */
		/* border-radius: 30rpx; */
		font-size: 26rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 20rpx 20rpx 0;
	}


	.dingweis {
		width: 32rpx;
		height: 32rpx;
	}

	.dingwei_city_zuijin {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.contents {
		/* display: flex; */
		background-color: #fff;
	}
</style>

city.js

module.exports = {
	list: [{
			"idx": "A",
			"cities": [{
					"city_name": "阿坝藏族羌族自治州",
				},
				{
					"city_name": "阿克苏市",
				},
				{
					"city_name": "阿拉尔市",
				},
				{
					"city_name": "阿拉善盟",
				},
				{
					"city_name": "阿勒泰市",
				},
				{
					"city_name": "阿里地区",
				},
				{
					"city_name": "阿图什市",
				},
				{
					"city_name": "安康市",
				},
				{
					"city_name": "安庆市",
				},
				{
					"city_name": "安顺市",
				},
				{
					"city_name": "安阳市",
				},
				{
					"city_name": "鞍山市",
				}
			]
		},
		{
			"idx": "B",
			"cities": [{
					"city_name": "巴彦淖尔市",
				},
				{
					"city_name": "巴中市",
				},
				{
					"city_name": "白城市",
				},
				{
					"city_name": "白沙黎族自治县",
				},
				{
					"city_name": "白山市",
				},
				{
					"city_name": "白银市",
				},
				{
					"city_name": "百色市",
				},
				{
					"city_name": "蚌埠市",
				},
				{
					"city_name": "包头市",
				},
				{
					"city_name": "宝鸡市",
				},
				{
					"city_name": "保定市",
				},
				{
					"city_name": "保山市",
				},
				{
					"city_name": "保亭黎族苗族自治县",
				},
				{
					"city_name": "北海市",
				},
				{
					"city_name": "北京市",
				},
				{
					"city_name": "本溪市",
				},
				{
					"city_name": "毕节地区",
				},
				{
					"city_name": "滨州市",
				},
				{
					"city_name": "亳州市",
				},
				{
					"city_name": "博乐市",
				}
			]
		},
		{
			"idx": "C",
			"cities": [{
					"city_name": "长春市",
				},
				{
					"city_name": "长沙市",
				},
				{
					"city_name": "长治市",
				}, {
					"city_name": "沧州市",
				},
				{
					"city_name": "昌都地区",
				},
				{
					"city_name": "昌吉市 ",
				},
				{
					"city_name": "昌江黎族自治县",
				},
				{
					"city_name": "常德市",
				},
				{
					"city_name": "常州市",
				},
				{
					"city_name": "巢湖市",
				},
				{
					"city_name": "朝阳市",
				},
				{
					"city_name": "潮州市",
				},
				{
					"city_name": "郴州市",
				},
				{
					"city_name": "成都市",
				},
				{
					"city_name": "承德市",
				},
				{
					"city_name": "澄迈县",
				},
				{
					"city_name": "池州市",
				},
				{
					"city_name": "赤峰市",
				},
				{
					"city_name": "崇左市",
				},
				{
					"city_name": "滁州市",
				},
				{
					"city_name": "楚雄彝族自治州",
				}
			]
		},
		{
			"idx": "D",
			"cities": [{
					"city_name": "达州市",
				},
				{
					"city_name": "大理白族自治州",
				},
				{
					"city_name": "大连市",
				},
				{
					"city_name": "大庆市",
				},
				{
					"city_name": "大同市",
				},
				{
					"city_name": "大兴安岭地区",
				},
				{
					"city_name": "丹东市",
				},
				{
					"city_name": "儋州市",
				}, {
					"city_name": "德宏傣族景颇族自治州",
				},
				{
					"city_name": "德阳市",
				},
				{
					"city_name": "德州市",
				},
				{
					"city_name": "迪庆藏族自治州",
				},
				{
					"city_name": "定安县",
				},
				{
					"city_name": "定西市",
				},
				{
					"city_name": "东方市",
				},
				{
					"city_name": "东莞市",
				},
				{
					"city_name": "东营市",
				}
			]
		},
		{
			"idx": "E",
			"cities": [{
					"city_name": "鄂尔多斯市",
				},
				{
					"city_name": "鄂州市",
				},
				{
					"city_name": "恩施土家族苗族自治州",
				}
			]
		},
		{
			"idx": "F",
			"cities": [{
					"city_name": "防城港市",
				},
				{
					"city_name": "佛山市",
				},
				{
					"city_name": "福州市",
				},
				{
					"city_name": "抚顺市",
				},
				{
					"city_name": "抚州市",
				},
				{
					"city_name": "阜康市",
				},
				{
					"city_name": "阜新市",
				},
				{
					"city_name": "阜阳市",
				}
			]
		},
		{
			"idx": "G",
			"cities": [{
					"city_name": "甘南藏族自治州",
				},
				{
					"city_name": "甘孜藏族自治州",
				},
				{
					"city_name": "赣州市",
				},
				{
					"city_name": "固原市",
				},
				{
					"city_name": "广安市",
				},
				{
					"city_name": "广元市",
				},
				{
					"city_name": "广州市",
				},
				{
					"city_name": "贵港市",
				},
				{
					"city_name": "贵阳市",
				},
				{
					"city_name": "桂林市",
				},
				{
					"city_name": "果洛藏族自治州",
				}
			]
		},
		{
			"idx": "H",
			"cities": [{
					"city_name": "哈尔滨市",
				},
				{
					"city_name": "哈密市",
				},
				{
					"city_name": "海北藏族自治州",
				},
				{
					"city_name": "海东地区",
				},
				{
					"city_name": "海口市",
				},
				{
					"city_name": "海南藏族自治州",
				},
				{
					"city_name": "海西蒙古族藏族自治州",
				},
				{
					"city_name": "邯郸市",
				},
				{
					"city_name": "汉中市",
				},
				{
					"city_name": "杭州市",
				},
				{
					"city_name": "合肥市",
				},
				{
					"city_name": "和田市",
				},
				{
					"city_name": "河池市",
				},
				{
					"city_name": "河源市",
				},
				{
					"city_name": "菏泽市",
				},
				{
					"city_name": "贺州市",
				},
				{
					"city_name": "鹤壁市",
				},
				{
					"city_name": "鹤岗市",
				},
				{
					"city_name": "黑河市",
				},
				{
					"city_name": "衡水市",
				},
				{
					"city_name": "衡阳市",
				},
				{
					"city_name": "红河哈尼族彝族自治州",
				},
				{
					"city_name": "呼和浩特市",
				},
				{
					"city_name": "呼伦贝尔市",
				},
				{
					"city_name": "葫芦岛市",
				},
				{
					"city_name": "湖州市",
				},
				{
					"city_name": "怀化市",
				},
				{
					"city_name": "淮安市",
				},
				{
					"city_name": "淮北市",
				},
				{
					"city_name": "淮南市",
				},
				{
					"city_name": "黄冈市",
				},
				{
					"city_name": "黄南藏族自治州",
				},
				{
					"city_name": "黄山市",
				},
				{
					"city_name": "黄石市",
				},
				{
					"city_name": "惠州市",
				}
			]
		},
		{
			"idx": "J",
			"cities": [{
					"city_name": "鸡西市",
				},
				{
					"city_name": "吉安市",
				},
				{
					"city_name": "吉林市",
				},
				{
					"city_name": "济南市",
				},
				{
					"city_name": "济宁市",
				},
				{
					"city_name": "济源市",
				},
				{
					"city_name": "佳木斯市",
				},
				{
					"city_name": "嘉兴市",
				},
				{
					"city_name": "嘉峪关市",
				},
				{
					"city_name": "江门市",
				},
				{
					"city_name": "焦作市",
				},
				{
					"city_name": "揭阳市",
				},
				{
					"city_name": "金昌市",
				},
				{
					"city_name": "金华市",
				},
				{
					"city_name": "锦州市",
				},
				{
					"city_name": "晋城市",
				},
				{
					"city_name": "晋中市",
				},
				{
					"city_name": "荆门市",
				},
				{
					"city_name": "荆州市",
				},
				{
					"city_name": "景德镇市",
				},
				{
					"city_name": "九江市",
				},
				{
					"city_name": "酒泉市",
				}
			]
		},
		{
			"idx": "K",
			"cities": [{
					"city_name": "喀什市",
				},
				{
					"city_name": "开封市",
				},
				{
					"city_name": "克拉玛依市",
				},
				{
					"city_name": "库尔勒市",
				},
				{
					"city_name": "奎屯市",
				},
				{
					"city_name": "昆明市",
				}
			]
		},
		{
			"idx": "L",
			"cities": [{
					"city_name": "拉萨市",
				},
				{
					"city_name": "来宾市",
				},
				{
					"city_name": "莱芜市",
				},
				{
					"city_name": "兰州市",
				},
				{
					"city_name": "廊坊市",
				},
				{
					"city_name": "乐东黎族自治县",
				},
				{
					"city_name": "乐山市",
				},
				{
					"city_name": "丽江市",
				},
				{
					"city_name": "丽水市",
				},
				{
					"city_name": "连云港市",
				},
				{
					"city_name": "凉山彝族自治州",
				},
				{
					"city_name": "辽阳市",
				},
				{
					"city_name": "辽源市",
				},
				{
					"city_name": "聊城市",
				},
				{
					"city_name": "林芝地区",
				},
				{
					"city_name": "临沧市",
				},
				{
					"city_name": "临汾市",
				},
				{
					"city_name": "临高县",
				},
				{
					"city_name": "临夏回族自治州",
				},
				{
					"city_name": "临沂市",
				},
				{
					"city_name": "陵水黎族自治县",
				},
				{
					"city_name": "柳州市",
				},
				{
					"city_name": "六安市",
				},
				{
					"city_name": "六盘水市",
				},
				{
					"city_name": "龙岩市",
				},
				{
					"city_name": "陇南市",
				},
				{
					"city_name": "娄底市",
				},
				{
					"city_name": "泸州市",
				},
				{
					"city_name": "洛阳市",
				},
				{
					"city_name": "漯河市",
				},
				{
					"city_name": "吕梁市",
				}
			]
		},
		{
			"idx": "M",
			"cities": [{
					"city_name": "马鞍山市",
				},
				{
					"city_name": "茂名市",
				},
				{
					"city_name": "眉山市",
				},
				{
					"city_name": "梅州市",
				},
				{
					"city_name": "米泉市",
				},
				{
					"city_name": "绵阳市",
				},
				{
					"city_name": "牡丹江市",
				}
			]
		},
		{
			"idx": "N",
			"cities": [{
					"city_name": "那曲地区",
				},
				{
					"city_name": "南昌市",
				},
				{
					"city_name": "南充市",
				},
				{
					"city_name": "南京市",
				},
				{
					"city_name": "南宁市",
				},
				{
					"city_name": "南平市",
				},
				{
					"city_name": "南通市",
				},
				{
					"city_name": "南阳市",
				},
				{
					"city_name": "内江市",
				},
				{
					"city_name": "宁波市",
				},
				{
					"city_name": "宁德市",
				},
				{
					"city_name": "怒江傈傈族自治州",
				}
			]
		},
		{
			"idx": "P",
			"cities": [{
					"city_name": "攀枝花市",
				},
				{
					"city_name": "盘锦市",
				},
				{
					"city_name": "平顶山市",
				},
				{
					"city_name": "平凉市",
				},
				{
					"city_name": "萍乡市",
				},
				{
					"city_name": "莆田市",
				},
				{
					"city_name": "濮阳市",
				}
			]
		},
		{
			"idx": "Q",
			"cities": [{
					"city_name": "七台河市",
				},
				{
					"city_name": "齐齐哈尔市",
				},
				{
					"city_name": "潜江市",
				},
				{
					"city_name": "黔东南苗族侗族自治州",
				},
				{
					"city_name": "黔南布依族苗族自治州",
				},
				{
					"city_name": "黔西南布依族苗族自治州",
				},
				{
					"city_name": "钦州市",
				},
				{
					"city_name": "秦皇岛市",
				},
				{
					"city_name": "青岛市",
				},
				{
					"city_name": "清远市",
				},
				{
					"city_name": "庆阳市",
				},
				{
					"city_name": "琼海市",
				},
				{
					"city_name": "琼中黎族苗族自治县",
				},
				{
					"city_name": "衢州市",
				},
				{
					"city_name": "曲靖市",
				},
				{
					"city_name": "泉州市",
				}
			]
		},
		{
			"idx": "R",
			"cities": [{
					"city_name": "日喀则地区",
				},
				{
					"city_name": "日照市",
				}
			]
		},
		{
			"idx": "S",
			"cities": [{
					"city_name": "三门峡市",
				},
				{
					"city_name": "三明市",
				},
				{
					"city_name": "三亚市",
				},
				{
					"city_name": "山南地区",
				},
				{
					"city_name": "汕头市",
				},
				{
					"city_name": "汕尾市",
				},
				{
					"city_name": "商洛市",
				},
				{
					"city_name": "商丘市",
				},
				{
					"city_name": "上海市",
				},
				{
					"city_name": "上饶市",
				},
				{
					"city_name": "韶关市",
				},
				{
					"city_name": "邵阳市",
				},
				{
					"city_name": "绍兴市",
				},
				{
					"city_name": "深圳市",
				},
				{
					"city_name": "神农架林区",
				},
				{
					"city_name": "沈阳市",
				},
				{
					"city_name": "十堰市",
				},
				{
					"city_name": "石河子市 ",
				},
				{
					"city_name": "石家庄市",
				},
				{
					"city_name": "石嘴山市",
				},
				{
					"city_name": "双鸭山市",
				},
				{
					"city_name": "朔州市",
				},
				{
					"city_name": "思茅市",
				},
				{
					"city_name": "四平市",
				},
				{
					"city_name": "松原市",
				},
				{
					"city_name": "苏州市",
				},
				{
					"city_name": "绥化市",
				},
				{
					"city_name": "随州市",
				},
				{
					"city_name": "遂宁市",
				},
				{
					"city_name": "宿迁市",
				},
				{
					"city_name": "宿州市",
				}
			]
		},
		{
			"idx": "T",
			"cities": [{
					"city_name": "塔城市",
				},
				{
					"city_name": "台州市",
				},
				{
					"city_name": "太原市",
				},
				{
					"city_name": "泰安市",
				},
				{
					"city_name": "泰州市",
				},
				{
					"city_name": "唐山市",
				},
				{
					"city_name": "天津市",
				},
				{
					"city_name": "天门市",
				},
				{
					"city_name": "天水市",
				},
				{
					"city_name": "铁岭市",
				},
				{
					"city_name": "通化市",
				},
				{
					"city_name": "通辽市",
				},
				{
					"city_name": "铜川市",
				},
				{
					"city_name": "铜陵市",
				},
				{
					"city_name": "铜仁地区",
				},
				{
					"city_name": "图木舒克市",
				},
				{
					"city_name": "吐鲁番市",
				},
				{
					"city_name": "屯昌县",
				}
			]
		},
		{
			"idx": "W",
			"cities": [{
					"city_name": "万宁市",
				},
				{
					"city_name": "威海市",
				},
				{
					"city_name": "潍坊市",
				},
				{
					"city_name": "渭南市",
				},
				{
					"city_name": "温州市",
				},
				{
					"city_name": "文昌市",
				},
				{
					"city_name": "文山壮族苗族自治州",
				},
				{
					"city_name": "乌海市",
				},
				{
					"city_name": "乌兰察布市",
				},
				{
					"city_name": "乌鲁木齐市",
				},
				{
					"city_name": "乌苏市",
				},
				{
					"city_name": "无锡市",
				},
				{
					"city_name": "芜湖市",
				},
				{
					"city_name": "吴忠市",
				},
				{
					"city_name": "梧州市",
				},
				{
					"city_name": "五家渠市",
				},
				{
					"city_name": "五指山市",
				},
				{
					"city_name": "武汉市",
				},
				{
					"city_name": "武威市",
				}
			]
		},
		{
			"idx": "X",
			"cities": [{
					"city_name": "西安市",
				},
				{
					"city_name": "西宁市",
				},
				{
					"city_name": "西双版纳傣族自治州",
				},
				{
					"city_name": "锡林郭勒盟",
				},
				{
					"city_name": "仙桃市",
				},
				{
					"city_name": "咸宁市",
				},
				{
					"city_name": "咸阳市",
				},
				{
					"city_name": "湘潭市",
				},
				{
					"city_name": "湘西土家族苗族自治州",
				},
				{
					"city_name": "襄樊市",
				},
				{
					"city_name": "厦门市",
				},
				{
					"city_name": "孝感市",
				},
				{
					"city_name": "忻州市",
				},
				{
					"city_name": "新乡市",
				},
				{
					"city_name": "新余市",
				},
				{
					"city_name": "信阳市",
				},
				{
					"city_name": "邢台市",
				},
				{
					"city_name": "兴安盟",
				},
				{
					"city_name": "徐州市",
				},
				{
					"city_name": "许昌市",
				},
				{
					"city_name": "宣城市",
				}
			]
		},
		{
			"idx": "Y",
			"cities": [{
					"city_name": "雅安市",
				},
				{
					"city_name": "烟台市",
				},
				{
					"city_name": "延安市",
				},
				{
					"city_name": "延边朝鲜族自治州",
				},
				{
					"city_name": "盐城市",
				},
				{
					"city_name": "扬州市",
				},
				{
					"city_name": "阳江市",
				},
				{
					"city_name": "阳泉市",
				},
				{
					"city_name": "伊春市",
				},
				{
					"city_name": "伊宁市",
				},
				{
					"city_name": "宜宾市",
				},
				{
					"city_name": "宜昌市",
				},
				{
					"city_name": "宜春市",
				},
				{
					"city_name": "益阳市",
				},
				{
					"city_name": "银川市",
				},
				{
					"city_name": "鹰潭市",
				},
				{
					"city_name": "营口市",
				},
				{
					"city_name": "永州市",
				},
				{
					"city_name": "榆林市",
				},
				{
					"city_name": "玉林市",
				},
				{
					"city_name": "玉树藏族自治州",
				},
				{
					"city_name": "玉溪市",
				},
				{
					"city_name": "岳阳市",
				},
				{
					"city_name": "云浮市",
				},
				{
					"city_name": "运城市",
				}
			]
		},
		{
			"idx": "Z",
			"cities": [{
					"city_name": "枣庄市",
				},
				{
					"city_name": "湛江市",
				},
				{
					"city_name": "张家界市",
				},
				{
					"city_name": "张家口市",
				},
				{
					"city_name": "张掖市",
				},
				{
					"city_name": "漳州市",
				},
				{
					"city_name": "长春市",
				},
				{
					"city_name": "长沙市",
				},
				{
					"city_name": "长治市",
				},
				{
					"city_name": "昭通市",
				},
				{
					"city_name": "肇庆市",
				},
				{
					"city_name": "镇江市",
				},
				{
					"city_name": "郑州市",
				},
				{
					"city_name": "中山市",
				},
				{
					"city_name": "中卫市",
				},
				{
					"city_name": "重庆市",
				},
				{
					"city_name": "舟山市",
				},
				{
					"city_name": "周口市",
				},
				{
					"city_name": "珠海市",
				},
				{
					"city_name": "株洲市",
				},
				{
					"city_name": "驻马店市",
				},
				{
					"city_name": "资阳市",
				},
				{
					"city_name": "淄博市",
				},
				{
					"city_name": "自贡市",
				},
				{
					"city_name": "遵义市",
				}
			]
		}
	],
	index: [{
			"idx": "A"
		},
		{
			"idx": "B"
		},
		{
			"idx": "C"
		},
		{
			"idx": "D"
		},
		{
			"idx": "E"
		},
		{
			"idx": "F"
		},
		{
			"idx": "G"
		},
		{
			"idx": "H"
		},
		{
			"idx": "J"
		},
		{
			"idx": "K"
		},
		{
			"idx": "L"
		},
		{
			"idx": "M"
		},
		{
			"idx": "N"
		},
		{
			"idx": "P"
		},
		{
			"idx": "Q"
		},
		{
			"idx": "R"
		},
		{
			"idx": "S"
		},
		{
			"idx": "T"
		},
		{
			"idx": "W"
		},
		{
			"idx": "X"
		},
		{
			"idx": "Y"
		},
		{
			"idx": "Z"
		}
	]
}
 
<think>好的,用户问的是“灵动岛是什么”,我需要先弄清楚这个术语的具体含义。首先,灵动岛听起来像是一个科技产品或功能的名字,可能跟智能手机有关。我记得苹果在iPhone 14 Pro系列中推出了一个叫做Dynamic Island的功能,中文翻译可能就是“灵动岛”。我需要确认这一点。 接下来,我应该解释灵动岛的基本概念。它位于屏幕顶部的药丸形区域,原本是为了容纳前置摄像头和Face ID传感器而设计的。苹果通过软件将其转化为一个交互式的区域,显示实时活动和通知。这和之前的刘海屏设计不同,更具互动性。 然后需要详细说明它的主要功能,比如显示系统提醒(来电、Face ID验证、充电状态等),实时活动(音乐播放、计时器、导航等),以及交互操作(长按、轻触、滑动等手势)。这些功能让用户无需离开当前应用就能快速访问信息,提升使用效率。 还要提到它的设计理念,即通过软硬件结合,将原本的硬件缺陷转化为实用功能,体现了苹果的创新思维。同时,灵动岛的UI设计会根据内容变化形状和大小,保持视觉上的统一。 最后,可能补充一下适用机型,主要是iPhone 14 Pro和Pro Max,以及后续的iPhone 15系列是否支持。另外,可以提及用户和市场的反响,比如是否受到好评,有没有什么缺点,比如适配问题或屏幕空间占用等。 检查是否有遗漏的信息,比如技术细节或与其他品牌的类似功能对比,但用户可能只需要基础介绍,所以保持简洁。确保使用中文,结构清晰,分点说明,同时遵循系统级指令中的格式要求,数学公式部分可能用不上,但要注意其他格式规则。</think>### 灵动岛是什么? **灵动岛**(Dynamic Island)是苹果公司为iPhone 14 Pro及后续高端机型设计的一项交互式界面功能,旨在将屏幕顶部的“药丸形”挖孔区域(用于前置摄像头和Face ID传感器)转化为一个动态显示与交互的核心区域。它通过软硬件结合的方式,将原本静态的硬件缺陷转化为动态的信息中心。 --- ### 核心功能与特点 1. **实时活动显示** 灵动岛可以动态展示当前后台任务的实时状态,例如: - 音乐播放(显示专辑封面、播放进度) - 通话计时或录音状态 - 导航指示、外卖配送进度 - 充电状态或设备连接提示 $$ \text{例:显示“正在播放:歌曲名 - 艺术家”} $$ 2. **交互式操作** 用户可以通过点击、长按或滑动直接与灵动岛互动,无需跳转到对应App- 轻触展开详细信息(如查看完整歌词) - 长按快速控制功能(如暂停音乐) - 滑动关闭任务 3. **系统通知整合** 将传统弹窗通知转化为更柔和的“气泡”样式,从灵动岛展开,减少对屏幕内容的遮挡。 4. **自适应UI设计** 灵动岛的形态会随内容动态变化,例如: - 来电时扩展为长条形显示通话人信息 - Face ID验证时短暂缩小为圆点 --- ### 技术实现原理 - **软硬件协同**:通过OLED屏幕的局部亮度和色彩控制,隐藏挖孔区域的硬件边界。 - **动画过渡**:流畅的形变动画让视觉焦点集中在信息本身,而非硬件形态。 --- ### 适配机型 目前支持灵动岛的机型包括: - iPhone 14 Pro / Pro Max - iPhone 15全系列 --- ### 评价与意义 - **创新性**:将硬件限制转化为功能亮点,体现了“缺陷设计”的巧思。 - **争议点**:部分用户认为其占用屏幕空间,且第三方App适配需时间完善。 - **行业影响**:推动了安卓厂商对类似交互设计的探索(如“灵动胶囊”)。 如果需要进一步了解具体操作或场景示例,可以随时提问!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值