当前位置: 首页 > 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…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...