view

<template><view class="address-wrap" id="address"><!-- 搜索输入框-start --><view class="search-wrap" :style="{top:windowTop+'px'}"><view class="searchInfor-input"><text class="iconfont search-icon"></text><input type="text" confirm-type="search" class="searchInfor-text" @input="searchInputHandle" @confirm="searchConfirmHandle" placeholder="输入国内城市/区域查询" placeholder-style="color:#fff" /></view></view><view style="height: 32px;"></view><!-- 搜索输入框-end --><template v-if="!isSearch"><!-- 城市列表-start --><view class="address-scroll"><!-- 当前城市 --><view class="address-currentcity" id="start"><view class="address-currentcity-title">当前城市</view><view class="address-currentcity-name"><text class="iconfont"></text><text style="margin-left: 8.5px;">上海</text></view></view><!-- 选择城市 --><view class="address-choosecity"><view class="address-choosecity-title">选择城市</view><view class="address-choosecity-con"><template v-for="(item,index) in CityList"><view class="address-choosecity-item" :key="index" :id="index"><view class="choosecity-item-title">{{index}}</view><template v-for="value in item"><view class="choosecity-item-li" :key="value.name" @click="chooseCityHandle(value)">{{value.name}}</view></template></view></template></view></view></view><!-- 城市列表-end --><!-- 对应字母 --><view class="address-letter"><view class="address-letter-item" @click="scrollHandle('start')"><text class="iconfont"></text></view><template v-for="(item,index) in CityList"><view class="address-letter-item" :key="index" @click="scrollHandle(index)">{{index}}</view></template></view></template><!-- 搜索 --><template v-else><view class="search-content"><block v-if="searchTotalList.length>0"><view class="search-con-item" v-for="item in searchTotalList" :key="item.code" @click="chooseCityHandle(item)">{{item.name}}</view></block><block v-else><view class="search-total">无结果</view></block></view></template></view>
</template>

script

引入Pinyin-pro组件把汉族转换成拼音
npm install pinyin-pro
cityData.js==>本地城市数据（博客资源中有文件）

<script>import utils from '../../common/js/utils.js'import { pinyin } from 'pinyin-pro';import cityData from "../common/js/cityData.js"export default {data() {return {cityData:cityData.cityData(),searchVal:'',SearchList:[],//查询数组CityList:{},//根据拼音排序的城市数据windowTop:0,isSearch:false,//是否显示搜索内容，默认：falsesearchTotalList:[],//搜索结果};},onLoad() {this.dealwithCityData();},onShow() {//获取手机系统信息const systemInfo=uni.getSystemInfoSync();console.log("[systemInfo]",systemInfo)// #ifdef H5 || APP-PLUS || MP-ALIPAYthis.windowTop=systemInfo.windowTop// #endif},methods:{//处理城市数据dealwithCityData(){let tempCityList={};//临时城市数据const cityData=this.cityData;for(let i=0;i<cityData.length;i++){if(tempCityList[cityData[i].name]==undefined){tempCityList[cityData[i].name]=[];}tempCityList[cityData[i].name].push({code:cityData[i].code,name:cityData[i].name})let cityList=cityData[i].cityList;if(cityList&&cityList.length>0){for(let j=0;j<cityList.length;j++){if(tempCityList[cityList[j].name]==undefined){tempCityList[cityList[j].name]=[]}tempCityList[cityList[j].name].push({code:cityList[j].code,name:cityList[j].name})let areaList=cityList[j].areaList;if(areaList&&areaList.length>0){for(let t=0;t<areaList.length;t++){if(tempCityList[areaList[t].name]==undefined){tempCityList[areaList[t].name]=[]}tempCityList[areaList[t].name].push({code:areaList[t].code,name:areaList[t].name})}}}}}//把数据转换成拼音let tempPinYinList={};//临时拼音数据for(let i in tempCityList){let py=pinyin(i.substring(0,1), { pattern: 'first', toneType: 'none' }).toUpperCase();if(tempPinYinList[py]==undefined){tempPinYinList[py]=[];}tempPinYinList[py].push(tempCityList[i][0])}//对数据进行排序this.CityList=this.objKeySort(tempPinYinList);//生成查询数组let tempSearchList=[];for(let i in this.CityList){for(let j=0;j<this.CityList[i].length;j++){tempSearchList.push(this.CityList[i][j])}}this.SearchList=tempSearchList;},objKeySort(obj) {//排序的函数var newkey = Object.keys(obj).sort();//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组var newObj = {};//创建一个新的对象，用于存放排好序的键值对for (var i = 0; i < newkey.length; i++) {//遍历newkey数组newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对}return newObj;//返回排好序的新对象},//搜索searchInputHandle(e){let value=utils.trim(e.detail.value);if(value.length>0){this.isSearch=truethis.searchHandle(value);}else{this.isSearch=false}},searchConfirmHandle(e){let value=utils.trim(e.detail.value);if(value.length>0){this.isSearch=truethis.searchHandle(value);}else{this.isSearch=false}},searchHandle(keyWord){const SearchList=this.SearchList;let tempSearchTotal=[];SearchList.forEach((value,index)=>{if(value.name.indexOf(keyWord)!=-1){tempSearchTotal.push(value)}})this.searchTotalList=tempSearchTotal;},//点击字母滚动事件scrollHandle(index){const query = uni.createSelectorQuery().in(this);uni.createSelectorQuery().select("#address").boundingClientRect(data=>{uni.createSelectorQuery().select("#"+index).boundingClientRect((res)=>{uni.pageScrollTo({duration:100,scrollTop:res.top - data.top - 12,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离})}).exec()}).exec();},//选择城市chooseCityHandle(params){this.$store.dispatch("user/getPositionAddress",params)uni.switchTab({url:'../../pages/game/index'})}}}
</script>

style

<style lang="scss" scoped>
.address-wrap{width: 91.47%;margin: 12px auto;display: flex;flex-direction: column;// 搜索输入框.search-wrap{position: fixed;left: 0;right: 0;z-index: 3;background-color: #0A0E1D;.searchInfor-input{border-radius:16px;width:91.47%;height: 32px;display: flex;flex-direction: row;background: #252841;align-items: center;font-size: 14px;color: #FFFFFF;margin: auto;.search-icon{margin-left: 14.5px;}.searchInfor-text{height: 100%;flex: 1;margin: 0 16px 0 8px;font-weight: 400;}}}//城市筛选区.address-scroll{display: flex;flex-direction: column;.address-currentcity{display: flex;flex-direction: column;.address-currentcity-title{font-size: 15px;font-family: Source Han Sans CN;font-weight: 400;color: #999999;margin-top: 15.5px;}.address-currentcity-name{font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FEFEFE;margin-top: 20px;}}//选择城市.address-choosecity{display: flex;flex-direction: column;.address-choosecity-title{font-size: 15px;font-family: Source Han Sans CN;font-weight: 400;color: #999999;margin-top: 15.5px;}.address-choosecity-con{display: flex;flex-direction: column;.address-choosecity-item{display: flex;flex-direction: column;.choosecity-item-title{font-size: 15px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;margin-top: 18.5px;}.choosecity-item-li{font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FEFEFE;margin-top: 22.5px;}}}}}//字母.address-letter{position: fixed;top: 100px;right: 17.5px;display: flex;flex-direction: column;z-index: 10;font-size: 12px;font-family: Source Han Sans CN;font-weight: bold;color: #FFFFFF;align-items: center;.address-letter-item{margin-bottom: 3px;}}.search-content{display: flex;flex-direction: column;margin-top: 12px;margin-bottom: 12px;.search-con-item{border-bottom: 1px solid rgba(254, 254, 254, .2);height: 35px;line-height: 35px;font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FEFEFE;}.search-total{height: 100px;display: flex;font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FEFEFE;justify-content: center;align-items: center;}}
}
</style>

uniapp之地址定位选择，根据字母排序相关推荐

Excel将多个工作表一键按照字母排序
有多个工作表,可能是按省份分的,可能是按姓名分的,可能是按照字母分的,现在呢要教大家的是如何将工作表按照字母顺序,先英文后汉文的进行排序,先看动图演示 (方方格子插件) 1.选择方方格子按钮 2.选择 ...
[Android精品源码] Android 仿美团网,探索ListView的A-Z字母排序功能实现选择城市
Material Design中文版Code4APPPHP100UI4APP 开启辅助访问设为首页收藏本站快捷导航切换到宽版切换风格石刚 | |我的 |签到打卡 |设置 |消息 |提醒(2) |退出 ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
html5 a-z字母排序,Mint UI实现A-Z字母排序的城市选择列表
本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码,供大家参考,具体内容如下效果图如下: 项目文件存放路径图: 所有代码如下: import city from " ...
uni-app小程序，实现根据中文首字母排序功能
描述: 从后端调用接口获取所有热的姓名,将这些名字的首字母排序,然后放到对应字母下面,最终效果图如下: 实现过程 **总体实现的思路是:**首先调用接口,获取所有员工的姓名以及其他信息,将获取回来的中 ...
微信小程序列表首字母排序并根据字母定位
背景:页面左侧为分类,点击不同分类,右侧展示相应分类的列表数据,并点击字母悬浮窗,可以快速定位到相应的数据板块思路: 1.汉字转中文 2.排序 3.点击字母定位一汉字转中文汉字与拼音互转工具 ...
Pinyin4j的基本用法，以及给城市名称选择排序，侧边栏字母排序，内有Pinyin4j的下载链接，这是对我发表的上一篇文章进行修改以及更新bug，上一篇文章排序有点bug，现在将bug修改好了
1.需要下载Pinyin4j的jar包.下载地址为https://sourceforge.net/projects/pinyin4j/files/ 下载后需要放到安卓项目目录下的libs文件夹.如下图 ...
Android字母排序列表效果与开发实现
字母排序列表效果字母列表的实际运用:提供根据字母排序列表,方便用户快速找到自己需要的内容. GitHub下载地址 https://github.com/sufadi/AlphabetList CSD ...
Android 使用RecyclerView实现（仿微信）的联系人A-Z字母排序和过滤搜索功能
之前做项目的时候遇到一个需求是实现品牌的字母排序功能,网上的资料很多,但是有一部分有bug,这篇文章是我学习和解决部分bug之后的总结.今天带来的是RecyclerView的A-Z字母排序和过滤搜索功 ...

uniapp之地址定位选择，根据字母排序

uniapp之地址定位选择

view

script

style

uniapp之地址定位选择，根据字母排序相关推荐

最新文章

热门文章