当前位置: 首页 > news >正文

uniapp 选择城市定位 根据城市首字母分类排序

获取城市首字母排序,按字母顺序排序

<template><view class="address-wrap" id="address"><!-- 搜索输入框-end --><template v-if="!isSearch"><!-- 城市列表-start --><view class="address-scroll"><!-- 当前城市 --><view class="address-currentcity" id="start"><view class="address-currentcity-title">当前城市</view><view class="choosecity-item-li-item" :class="isSelectAreaId== 'start'? 'is-active': ''"><image class="icon-dingwei" src="@/static/image/icon-dingwei.png" mode="widthFix"></image><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><view class="flex-fs-left choosecity-item-li"><template v-for="value in item"><view class="choosecity-item-li-item line1" :class="isSelectAreaId==value.id?'is-active': ''" :key="value.name" @click="chooseCityHandle(value)">{{value.name}}</view></template></view></view></template></view></view></view><!-- 城市列表-end --><!-- 对应字母 --><view class="address-letter"><view class="address-letter-item" @click="scrollHandle('start')"><image class="letter-image" v-if="isLetterIndex== 'start'" src="@/static/image/tiny-spot.png" mode="widthFix"></image><image class="letter-image" v-else src="@/static/image/tiny-spot1.png" mode="widthFix"></image></view><template v-for="(item,index) in cityList"><view class="address-letter-item" :class="isLetterIndex==index? 'is-active': ''" :key="index" @click="scrollHandle(index)">{{index}}</view></template></view></template></view>
</template>

<script>import { pinyin } from 'pinyin-pro';import { mapGetters, mapMutations } from "vuex";import { getHotArea } from '@/api/commonApi.js'export default {data() {return {searchVal:'',cityList:{},//根据拼音排序的城市数据windowTop:0,isSearch:false,//是否显示搜索内容,默认:falseisLetterIndex: 'start',isSelectAreaId: 'start',};},onLoad() {this.getHotAreaList()this.dealwithCityData();},onShow() {//获取手机系统信息const systemInfo=uni.getSystemInfoSync();console.log("[systemInfo]",systemInfo)// #ifdef H5 || APP-PLUS || MP-ALIPAYthis.windowTop=systemInfo.windowTop// #endif},computed: {...mapGetters(["areaCacheList"]),cityData() {return this.areaCacheList || []}},methods:{// 获取热门城市getHotAreaList() {getHotArea().then(data=> {console.log(data)console.log('data-热门城市')})},//处理城市数据dealwithCityData(){let tempCityList={};//临时城市数据const cityData=this.cityData || [];let cityTempList = []cityData.forEach(element=> {if (element.children) {element.children.forEach(child=> {cityTempList.push({id: child._id,name: child.name})})}})// //把数据转换成拼音let tempPinYinList={};//临时拼音数据cityTempList.forEach(temp=>{let py=pinyin(temp.name.substring(0,1), { pattern: 'first', toneType: 'none' }).toUpperCase();if(tempPinYinList[py]==undefined){tempPinYinList[py]=[];}tempPinYinList[py].push(temp)})//对数据进行排序this.cityList= this.objKeySort(tempPinYinList);},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;//返回排好序的新对象},//点击字母滚动事件scrollHandle(index){console.log(index)console.log('index-----------------------')this.isLetterIndex = indexconst 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){console.log(params)console.log('params00000000000000000')this.isSelectAreaId = params.id}}}
</script>

<style lang="scss" scoped>
.address-wrap{padding: 24rpx;display: flex;flex-direction: column;background: #fff;//城市筛选区.address-scroll{display: flex;flex-direction: column;.address-currentcity{display: flex;flex-direction: column;.address-currentcity-title{font-size: 32rpx;font-family: PingFang SC;font-weight: 500;color: #4F4B4E;padding-bottom: 20rpx;}.icon-dingwei {width: 24rpx;height: 24rpx;}}//选择城市.address-choosecity{display: flex;flex-direction: column;.address-choosecity-title{font-size: 32rpx;font-family: PingFang SC;font-weight: 400;color: #999999;}}}.address-choosecity-con{display: flex;flex-direction: column;.address-choosecity-item{display: flex;flex-direction: column;.choosecity-item-title{font-size: 15px;font-family: PingFang SC;font-weight: 400;color: #4F4B4E;padding: 20rpx;}.choosecity-item-li{flex-wrap: wrap;}}}.choosecity-item-li-item {width: 200rpx;height: 70rpx;background: #fff;border-radius: 4rpx;border: 1rpx solid #E5E5E5;font-size: 26rpx;font-family: PingFang SC;font-weight: 400;color: #858585;line-height: 68rpx;text-align: center;margin-right: 40rpx;margin-bottom: 30rpx;padding: 0 8rpx;&:nth-child(3n) {margin-right: 0;}&.is-active {background: rgba(240,133,0,0.1);border: 1rpx solid #F08500;color: #4F4B4E;}}//字母.address-letter{position: fixed;top: 100rpx;right: 2rpx;display: flex;flex-direction: column;z-index: 10;font-size: 24rpx;font-family: PingFang SC;font-weight: bold;color: #4F4B4E;align-items: center;.address-letter-item{margin-bottom: 16rpx;&.is-active {color: #F08500;}}.letter-image {width: 24rpx;height: 24rpx;}}.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: PingFang SC;font-weight: 400;color: #4F4B4E;}.search-total{height: 100px;display: flex;font-size: 14px;font-family: PingFang SC;font-weight: 400;color: #4F4B4E;justify-content: center;align-items: center;}}
}
</style>

在这里插入图片描述

相关文章:

uniapp 选择城市定位 根据城市首字母分类排序

获取城市首字母排序&#xff0c;按字母顺序排序 <template><view class"address-wrap" id"address"><!-- 搜索输入框-end --><template v-if"!isSearch"><!-- 城市列表-start --><view class"address-sc…...

flex盒子 center排布,有滚动条时,拖动滚动条无法完整显示内容

文章目录 问题示例代码解决问题改进后的效果 问题 最近在开发项目的过程中&#xff0c;发现了一个有趣的事情&#xff0c;与flex盒子有关&#xff0c;不知道算不算是一个bug&#xff0c;不过对于开发者来说&#xff0c;确实有些不方便&#xff0c;感兴趣的同学不妨也去试试。 …...

Workbox使用分享

一、简要介绍 1.1 什么是Workbox 官方文档原文&#xff1a; At this point, service workers may seem tricky. There’s lots of complex interactions that are hard to get right. Network requests! Caching strategies! Cache management! Precaching! It’s a lot to r…...

秋招算法备战第32天 | 122.买卖股票的最佳时机II、55. 跳跃游戏、45.跳跃游戏II

122. 买卖股票的最佳时机 II - 力扣&#xff08;LeetCode&#xff09; 通过做差可以得到利润序列&#xff0c;然后只要利润需求的非负数求和就可以&#xff0c;因为这里没有手续费&#xff0c;某天买入之后买出可以等价为这几天连续买入卖出 class Solution:def maxProfit(se…...

Python状态模式介绍、使用

一、Python状态模式介绍 Python状态模式&#xff08;State Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许对象在不同的状态下表现不同的行为&#xff0c;从而避免在代码中使用多重条件语句。该模式将状态封装在独立的对象中&#xff0c;并根据当前状态选择不同的…...

Github-Copilot初体验-Pycharm插件的安装与测试

引言&#xff1a; 80%代码秒生成&#xff01;AI神器Copilot大升级 最近copilot又在众多独角兽公司的合力下&#xff0c;取得了重大升级。GitHub Copilot发布还不到两年&#xff0c; 就已经为100多万的开发者&#xff0c;编写了46%的代码&#xff0c;并提高了55%的编码速度。 …...

Spring AOP API详解

上一章介绍了Spring对AOP的支持&#xff0c;包括AspectJ和基于schema的切面定义。在这一章中&#xff0c;我们将讨论低级别的Spring AOP API。对于普通的应用&#xff0c;我们推荐使用前一章中描述的带有AspectJ pointcuts 的Spring AOP。 6.1. Spring 中的 Pointcut API 这一…...

分治法 Divide and Conquer

1.分治法 分治法&#xff08;Divide and Conquer&#xff09;是一种常见的算法设计思想&#xff0c;它将一个大问题分解成若干个子问题&#xff0c;递归地解决每个子问题&#xff0c;最后将子问题的解合并起来得到整个问题的解。分治法通常包含三个步骤&#xff1a; 1. Divid…...

super(Module_ModuleList, self).__init__()的作用是什么?

class Module_ModuleList(nn.Module):def __init__(self):super(Module_ModuleList, self).__init__()self.linears nn.ModuleList([nn.Linear(10, 10)])在这段代码中&#xff0c;super(Module_ModuleList, self).__init__() 的作用是调用父类 nn.Module 的 __init__ 方法&…...

【并发专题】操作系统模型及三级缓存架构

目录 课程内容一、冯诺依曼计算机模型详解1.计算机五大核心组成部分2.CPU内部结构3.CPU缓存结构4.CPU读取存储器数据过程5.CPU为何要有高速缓存 学习总结 课程内容 一、冯诺依曼计算机模型详解 现代计算机模型是基于-冯诺依曼计算机模型 计算机在运行时&#xff0c;先从内存中…...

java基础复习(第二日)

java基础复习(二) 1.抽象的&#xff08;abstract&#xff09;方法是否可同时是静态的&#xff08;static&#xff09;&#xff0c;是否可同时是本地方法&#xff08;native&#xff09;&#xff0c;是否可同时被 synchronized修饰&#xff1f; 都不能。 抽象方法需要子类重写…...

Ansible自动化运维工具

Ansible自动化运维工具 一、ansible介绍二、ansible环境安装部署三、ansible命令行模块1、command模块2、shell模块3、cron模块4、user模块5、group模块6、copy模块7、file模块8、hostname模块9、ping模块10、yum模块11、service/systemd模块12、script模块13、mount模块14、ar…...

LeetCode-116-填充每个节点的下一个右侧节点指针

一&#xff1a;题目描述&#xff1a; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; }填充它的每个 next 指针&#xff0c;让这个指…...

前端面试的性能优化部分(3)每篇10题

21.如何优化移动端网页的性能&#xff1f; 优化移动端网页的性能是提升用户体验、降低用户流失的关键。以下是一些优化移动端网页性能的常见方法&#xff1a; 压缩和合并资源&#xff1a; 压缩 CSS、JavaScript 和图片等静态资源&#xff0c;减少文件大小&#xff0c;同时合并…...

如何通过企业工商信息初步判断企业是否靠谱?

银行、投资机构等对企业进行融资、授信、合作时&#xff0c;需要如何评估企业的可靠性。企业工商信息作为企业的基础信息&#xff0c;是初步判断企业是否靠谱的重要依据之一&#xff0c;通过对企业工商信息的综合分析&#xff0c;我们可以了解企业的经营状况、财务实力、法律风…...

ChatGPT+知乎,20分钟超越专业大V的调教方法

AI技术正在迅速发展&#xff0c;渗透到我们的生活中&#xff0c;尤其在内容营销领域。 AI算法帮助我们生成文本、优化搜索引擎排名&#xff0c;提升用户体验等&#xff0c;这些创新正在塑造时代的前进方向&#xff0c;AI也将引领未来十年的变革。对于每个创业者、内容创作者和…...

git branch --show-current 和 git rev-parse --abbrev-ref HEAD 区别

git branch --show-current 和 git rev-parse --abbrev-ref HEAD 区别 git branch --show-current 和 git rev-parse --abbrev-ref HEAD 命令都可以用于获取当前所在的 Git 分支名称。 但是&#xff0c;它们之间有一些不同点&#xff1a; git branch --show-current 命令是 G…...

【TypeScript】接口类型 Interfaces 的使用理解

导语&#xff1a; 什么是 类型接口&#xff1f; 在面向对象语言中&#xff0c;接口&#xff08;Interfaces&#xff09;是一个很重要的概念&#xff0c;它是对行为的抽象&#xff0c;而具体如何行动需要由类&#xff08;classes&#xff09;去实现&#xff08;implement&#x…...

2023-07-31 C语言根据错误号打印详细的错误信息perror(““) 或者strerror(errno)

一、C 语言可以使用perror("perror output"); 或 strerror(errno)打印详细的错误信息。 二、需要的头文件#include <errno.h>。 三、实例测试&#xff0c;这里我让open一个linux 底层杂项设备失败的情况&#xff0c;返回的是一个负数&#xff0c;强制返回-EN…...

JDK17和JDK8完美卸载方法及新版JDK安装教程

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...