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

uview indexList 按字母跳转不了

 点击字母跳转不到位的问题:在<u-index-list>添加方法@select=“clickSelect“

锚点要加id,用对应的字母做为id值,

<u-index-anchor :id="key" :index="key"/>
<template><view><view class="search"><u-search v-model="keywords" @custom="search" @search="search" :margin="'0px 0 0 0'"></u-search></view><view class="wrap "><u-index-list class="container" :offsetTop="190" :scrollTop="scrollTop" @select="clickSelect":index-list="indexList"><view class="personal-listitem" v-for="(key, idx) in indexList" :key="idx" :use-slot="true"><view class="personal-listitem" :use-slot="true" data-top="idx"><u-index-anchor :id="key" :index="key"/><view class="list-cell" v-for="(item, index) in listByLetter[idx]" :key="index"@click="navTo('')"><view class="user-images-new">{{ key }}</view><view class="user-name"><span>{{ item}}</span><span class="user-other">{{ key }}</span></view></view></view></view></u-index-list><u-divider>已经到底了</u-divider></view></view>
</template>

 字母点击事件

  clickSelect(e) {//从当前位置到达目标位置console.log(">>>当前节点", e, this.scrollTop)try {uni.createSelectorQuery().select('#' + e).boundingClientRect((data) => {console.log(">>data", data)//目标位置的节点:类或者iduni.createSelectorQuery().select('.container').boundingClientRect((res) => {console.log(data, res)console.log(">>res.top", res.top)//最外层盒子的节点:类或者idthis.$nextTick(() => {uni.pageScrollTo({scrollTop: data.top - res.top,// selector: '#' + e,duration: 100 //app端这个必须设置成0})})}).exec()}).exec()} catch (e) {}},

点击跳转:

 出现字母乱跳:indexlist传入的数组字母,没跟真实的左侧的列表匹配上。

:index-list="indexList",如下例子,遍历之后右侧应该不是26个字母,是a,b,d,w,x,y这几个。

let indexList=[
{"letter":"a","data":["啊","爱","按"]},
{"letter":"b","data":["不"]},
{"letter":"d","data":["懂"]},
{"letter":"w","data":["我"]},
{"letter":"x","data":["县","选"]},
{"letter":"y","data":["呀","已"]}]

相关文章:

uview indexList 按字母跳转不了

点击字母跳转不到位的问题&#xff1a;在<u-index-list>添加方法select“clickSelect“ 锚点要加id&#xff0c;用对应的字母做为id值&#xff0c; <u-index-anchor :id"key" :index"key"/> <template><view><view class&qu…...

安全模型中的4个P

引言&#xff1a;在安全模型中&#xff0c;经常会碰到PDR,PPDR&#xff0c;IPDRR&#xff0c;CARTA-PPDR等模型&#xff0c;其中的P&#xff0c;是predict&#xff1f;是prevent&#xff1f;还是protect&#xff1f;还是policy呢&#xff1f; 一、4P字典意思解释 1、predict&a…...

网站优化搜索引擎与关键词

网站优化搜索引擎与关键词 人们不应该高估搜索引擎的智商。这不利于seo的研究&#xff0c;事实上&#xff0c;搜索引擎是非常愚蠢的&#xff0c;让我们举一个非常简单的例子&#xff0c;你在搜索引擎中输入“教师”这个词&#xff0c;搜索引擎就会给出一个准确的搜索列表。我们…...

aws-msk-托管kafka集群的简单使用(VPC内部访问:无验证和SASL认证)

1.使用控制台创建即可 根据实例类型创建需要至少15分以上&#xff0c;可以提前创建好ec2实例和Secrets Manager,一会会使用到 2. 创建Secrets Manager &#xff08;使用无认证时请跳过&#xff09; 官方文档&#xff1a;https://docs.aws.amazon.com/zh_cn/msk/latest/deve…...

Unity UGUI(二)核心组件

Unity Canvas相关知识学习 文章目录 Unity Canvas相关知识学习1. Canvas&#xff1a;1.1 Render Mode1.2 多个Canvas的显示顺序 2.Canvas Scaler&#xff1a;屏幕分辨率自适应2.1 UI Scale Mode 3. EventSystem4. Standalone Input Module5. Graphic Raycaster&#xff1a;图形…...

代码随想录二刷第二天(Python)

27. 移除元素 题目链接&#xff1a;https://leetcode.cn/problems/remove-element/ 题目描述&#xff1a;给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。不要使用额外的数组空间&#xff0c;你必…...

Mybatis学习笔记1 Mybatis入门

差不多根据mybatis中文文档:创建第一个mybatismaven项目,将它跑起来 入门_MyBatis中文网 新建库 建表 创建项目 重启之后 配置下Maven与encoding 成习惯了 新建模块 注意:这个GroupId和ArtifactId version是之后,你用Maven install时候后存放的包路径和包名 目录结构:虽然换…...

Spark 管理和更新Hadoop token 流程

Hadoop Token 管理 AM 通过 kerberos authenticationAM 获取 Yarn 和 HDFS TokenAM send tokens to containersContainers load tokens Enable debug message log4j.logger.org.apache.hadoop.securityDEBUG AM Generate tokens Logs: 23/09/07 22:38:50,375 INFO [main]…...

Android文件关联

用户需求:Android在系统文件夹找到一个文件想发送自己开发的app进行处理该怎么办? 这时候可以采用两个Activity,一个Activity用作Launcher,一个用于处理发送的文件;具体Activity intent-filter该怎么写了?可以参考下面的代码: <intent-filter><action androi…...

java操作adb查看apk安装包包名【搬代码】

Testpublic static void findadb() throws InterruptedException {String apkip"E:\\需求\\2023\\gql_1.0.1.apk";String findname1"cmd /c cd E:\\appium\\android-sdk\\build-tools\\27.0.2";//没有进到这里String s1 Cmd.exeCmd(findname1);System.out…...

【JAVA】Object类与抽象类

作者主页&#xff1a;paper jie_的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和…...

【设计模式】二、UML 类图概述

文章目录 常见含义含义依赖关系&#xff08;Dependence&#xff09;泛化关系&#xff08;Generalization&#xff09;实现关系&#xff08;Implementation&#xff09;关联关系&#xff08;Association&#xff09;聚合关系&#xff08;Aggregation&#xff09;组合关系&#x…...

百望云亮相服贸会 重磅发布业财税融Copilot

小望小望&#xff0c;我要一杯拿铁&#xff01; 好的&#xff0c;已下单成功&#xff0c;请问要开具发票嘛&#xff1f; 在获得确认的指令后&#xff0c; 百小望AI智能助手 按用户要求成功开具了一张电子发票&#xff01; 这是2023年服贸会国家会议中心成果发布现场&#x…...

vue 项目代码混淆配置(自定义插件适用)带配置项注释

文章目录 vue 项目代码混淆配置&#xff08;自定义插件适用&#xff09;带配置项注释一、概要二、混淆步骤1. 引入混淆插件2. 添加混淆配置3. 执行代码混淆 vue 项目代码混淆配置&#xff08;自定义插件适用&#xff09;带配置项注释 一、概要 本文章适用 vue-cli3/webpack4 …...

手写Spring:第7章-实现应用上下文

文章目录 一、目标&#xff1a;实现应用上下文二、设计&#xff1a;实现应用上下文三、实现&#xff1a;实现应用上下文3.1 工程结构3.2 Spring应用上下文和Bean对象扩展类图3.3 对象工厂和对象扩展接口3.3.1 对象工厂扩展接口3.3.2 对象扩展接口 3.4 定义应用上下文3.4.1 定义…...

Java(三)逻辑控制(if....else,循环语句)与方法

逻辑控制&#xff08;if....else&#xff0c;循环语句&#xff09;与方法 四、逻辑控制1.if...else(常用)1.1表达格式&#xff08;三种&#xff09; 2.switch...case(用的少)2.1表达式 3.while(常用)3.1语法格式3.2关键字beak&#xff1a;3.3关键字 continue&#xff1a; 4.for…...

通过API接口实现数据实时更新的方案(InsCode AI 创作助手)

要实现实时数据更新&#xff0c;需要采用轮询或者长连接两种方式。 1. 轮询方式 轮询方式指的是客户端定时向服务器请求数据的方式&#xff0c;通过一定的时间间隔去请求最新数据。具体的实现方法包括&#xff1a; 客户端定时向服务器发送请求&#xff0c;获取最新数据&…...

分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测

分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测 目录 分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测预测效果基本介绍程序设计参考资料致谢 预测效果 基本介绍 Matlab实现基于PCA-GRU主成分分析-门控循环单元多输入分类预测&#xff08;完整程序和数据…...

el-dialog无法关闭

代码如下&#xff0c;:visible.sync"result2DeptVisible"来控制dialog的隐显问题&#xff0c;但当点击关闭的时候 &#xff0c;无法关闭&#xff01;&#xff01; <el-dialog :visible.sync"result2DeptVisible" class"el-dialog-view">&…...

MATLAB算法实战应用案例精讲-【大模型】LLM算法(最终篇)

目录 前言 知识储备 1).通讯原语操作: 2).并行计算技术: 算法原理...

Zotero GPT插件全攻略:打造智能化文献管理工作流

Zotero GPT插件全攻略&#xff1a;打造智能化文献管理工作流 【免费下载链接】zotero-gpt GPT Meet Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-gpt 学术研究中&#xff0c;文献管理往往耗费研究者大量时间与精力。Zotero GPT插件将人工智能技术与文献…...

【仅限内部技术白皮书泄露版】:某金融级Java协议解析引擎设计文档(吞吐量23.8万TPS,延迟<1.2ms)

第一章&#xff1a;金融级Java协议解析引擎总体架构设计金融级Java协议解析引擎面向高频、低延时、强一致性的交易与清算场景&#xff0c;需在微秒级完成报文解析、字段校验、语义转换及路由分发。其总体架构采用分层解耦设计&#xff0c;兼顾可扩展性、可观测性与容灾能力&…...

别再手动输路径了!用VS Code Remote-WSL一键直达Ubuntu 20.04的home目录

极速直达WSL开发环境&#xff1a;VS Code高效工作流全指南 每次在Windows和WSL之间来回切换路径&#xff0c;就像在两个平行宇宙间手动搭建桥梁。作为深度使用WSL的开发者&#xff0c;我经历过无数次在资源管理器地址栏手输\\wsl$的痛苦&#xff0c;也曾在终端反复cd到项目目录…...

港科夜闻 | 香港科大“长者护脑社区计划“为6,000名长者提供阿尔兹海默症早筛

关注并星标每周阅读港科夜闻建立新视野 开启新思维1、香港科技大学3月23日宣布推出为期五年的 “长者护脑社区计划”。这项开创性计划以社区为本&#xff0c;旨在为香港基层长者提供阿尔兹海默症及轻度认知障碍的早期检测。香港科大将联同东华学院及十多间社福机构&#xff0c;…...

Streamlit+像素风=高效零售AI?Ostrakon-VL部署完整指南

Streamlit像素风高效零售AI&#xff1f;Ostrakon-VL部署完整指南 1. 项目概览&#xff1a;当零售AI遇上像素艺术 想象一下&#xff0c;你正在玩一款90年代的复古游戏&#xff0c;但这次你不是在打怪升级&#xff0c;而是在用AI分析零售店铺的货架陈列。这就是Ostrakon-VL扫描…...

CYBER-VISION零号协议Markdown文档大师:替代Typora的智能写作体验

CYBER-VISION零号协议Markdown文档大师&#xff1a;替代Typora的智能写作体验 如果你和我一样&#xff0c;每天都要和Markdown文档打交道&#xff0c;那你肯定知道那种感觉&#xff1a;面对一个空白文档&#xff0c;脑子里有想法&#xff0c;但就是敲不出满意的句子&#xff1…...

cool-admin(midway版)前端图标系统:高级实践

cool-admin(midway版)前端图标系统&#xff1a;高级实践 【免费下载链接】cool-admin-midway &#x1f525; cool-admin(midway版)一个很酷的后台权限管理框架&#xff0c;模块化、插件化、CRUD极速开发&#xff0c;永久开源免费&#xff0c;基于midway.js 3.x、typescript、ty…...

保姆级教程:用ArduPilot给无人车/船配置避障(附MR72雷达、TFmini Plus参数)

保姆级教程&#xff1a;用ArduPilot为无人车/船配置毫米波与激光雷达避障系统 当你的无人车在野外自动巡航时突然检测到前方障碍物&#xff0c;是紧急刹车还是智能绕行&#xff1f;水面无人船在夜间航行如何避开漂浮物&#xff1f;本文将手把手带你完成从硬件选型到参数调优的全…...

从Java全栈工程师视角看Web开发的实战与思考

从Java全栈工程师视角看Web开发的实战与思考 面试现场&#xff1a;一次真实的技术对话 面试官&#xff1a;你好&#xff0c;我是今天的面试官&#xff0c;很高兴见到你。请先简单介绍一下自己。 应聘者&#xff1a;你好&#xff0c;我叫李明&#xff0c;28岁&#xff0c;本科学…...

嵌入式编程规范:提升代码质量与团队协作效率

1. 嵌入式编程规范的重要性作为一名在嵌入式领域摸爬滚打多年的工程师&#xff0c;我深刻体会到代码规范的重要性。记得刚入行时接手过一个老项目&#xff0c;里面混杂着五种不同的命名风格和三套缩进规则&#xff0c;光是理清代码逻辑就花了两周时间。从那以后&#xff0c;我就…...