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":["呀","已"]}]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/72032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Python 进行分析

在当今竞争激烈的互联网时代&#xff0c;对于网站的SEO优化至关重要。本文将介绍一种强大的秘密武器&#xff1a;使用Python 进行竞争对手网站分析。通过这种技术&#xff0c;您可以深入了解竞争对手的网站结构、关键词排名和优化策略&#xff0c;为您的SEO优化工作提供有力支持…

Servlet学习总结(Request请求与转发,Response响应,Servlet生命周期、体系结构、执行流程等...)

Override 是Java中的注解&#xff08;Annotation&#xff09;&#xff0c;它用于告诉编译器该方法是覆盖&#xff08;重写&#xff09;父类中的方法。当我们使用Override注解时&#xff0c;编译器会检查当前方法是否正确地覆盖了父类中的方法&#xff0c;如果没有覆盖成功&…

MySQL 8.0.34(x64)安装笔记

一、背景 从MySQL 5.6到5.7&#xff0c;再到8.0&#xff0c;版本的跳跃不可谓不大。安装、配置的差别也不可谓不大&#xff0c;特此备忘。 二、过程 &#xff08;1&#xff09;获取MySQL 8.0社区版&#xff08;MySQL Community Server&#xff09;   从 官网 字样 “MySQL …

RTPV70-30、RTPV72-30电磁比例插装阀放大器

RTSP08-20、RTSP10-20、RTSP12-20、RTSP08-22、RTHSP09-30、RTPV70-30、RTPV72-30电磁比例插装阀额定电磁线圈适合连续工作&#xff0c;应急手控选件&#xff0c;外置式比例放大器&#xff0c;效湿式衔铁结构&#xff0c;可选IP69K防水E型线圈&#xff0c;工业通用阀孔。

robotframework 获取当前时间

1、获取年月日时分秒格式的数据 命令&#xff1a;${time} Get Current Date result_format%Y%m%d%H%M%S 日期时间显示结果显示形式&#xff1a;20230908102553 2、获取时间戳形式的数据 命令&#xff1a; ${time} Get Current Date result_formattimestamp …

uniapp里textarea多行文本输入限制数量

uniapp里textarea多行文本域实现输入计数 <template><view class"inputs"><textarea class"text1" maxlength50 placeholder请输入... input"sumfontnum"></textarea><text class"text2">{{fontNum}}/…

Pytest系列-快速入门和基础讲解(1)

前言 目前有两种纯测试的测试框架&#xff0c;pytest和unittestunittest应该是广为人知&#xff0c;而且也是老框架了&#xff0c;很多人都用来做自动化&#xff0c;无论是UI还是接口pytest是基于unittest开发的另一款更高级更好用的单元测试框架 单元测试框架介绍 单元测试…

gitLab(git)误提交命令

1.先使用下面命令查看一下分支上已提交的信息 git log 2.回退到之前的版本 git reset —hard 你要删除的提交哈希码&#xff08;一般是离这个命令最近的一串数字&#xff09; 3.覆盖掉远端的版本信息&#xff0c;使远端的仓库也回退到相应的版本 注意&#xff1a;切换到你提…

mac 查看端口占用

sudo lsof -i tcp:port # 示例 sudo lsof -i tcp:8080 杀死进程 sudo kill -9 PID # 示例 sudo kill -9 8080

element树形筛选

<el-inputv-model"projectName"placeholder"请输入名称"clearablemaxlength"10"clear"clearTree" /> <el-divider /> <el-treeref"tree"class"filter-tree":data"treeList":props"…

【Linux】高级IO --- Reactor网络IO设计模式

人其实很难抵制诱惑&#xff0c;人只能远离诱惑&#xff0c;所以千万不要高看自己的定力。 文章目录 一、LT和ET模式1.理解LT和ET的工作原理2.通过代码来观察LT和ET工作模式的不同3.ET模式高效的原因&#xff08;fd必须是非阻塞的&#xff09;4.LT和ET模式使用时的读取方式 二…

时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测(风电功率预测)

时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测&#xff08;风电功率预测&#xff09; 目录 时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测&#xff08;风电功率预测&#xff09;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1…

软路由的负载均衡设置:优化网络性能和带宽利用率

在现代网络环境中&#xff0c;提升网络性能和最大化带宽利用率至关重要。通过合理配置软路由IP的负载均衡设置&#xff0c;可以有效地实现这一目标&#xff0c;并提高整体稳定性与效果。本文将详细介绍如何进行软路由IP的负载均衡设置&#xff0c;从而优化网络表现、增加带宽利…

数据结构——二叉树线索化遍历(前中后序遍历)

二叉树线索化 线索化概念&#xff1a; 为什么要转换为线索化 二叉树线索化是一种将普通二叉树转换为具有特殊线索&#xff08;指向前驱和后继节点&#xff09;的二叉树的过程。这种线索化的目的是为了提高对二叉树的遍历效率&#xff0c;特别是在不使用递归或栈的情况下进行遍历…

Docker部署(5)——使用docker run命令部署运行jar项目

对于一些简单的单体项目&#xff0c;可以使用 docker run 命令可以直接在命令行中运行容器&#xff0c;无需事先构建镜像。这相较于之前使用的 dockerfile 文件来运行部署项目相当于是另外一种简单的部署方法&#xff0c;关于之前使用dockerfile 文件来运行部署这种方法&#x…

l8-d8 TCP并发实现

一、TCP多进程并发 1.地址快速重用 先退出服务端&#xff0c;后退出客户端&#xff0c;则服务端会出现以下错误&#xff1a; 地址仍在使用中 解决方法&#xff1a; /*地址快速重用*/ int flag1,len sizeof (int); if ( setsockopt(fd, SOL_SOCKET, SO_REUSEADDR, &a…

B-Tree 索引和 Hash 索引的对比

分析&回答 B-Tree 索引的特点 B-tree 索引可以用于使用 , >, >, <, < 或者 BETWEEN 运算符的列比较。如果 LIKE 的参数是一个没有以通配符起始的常量字符串的话也可以使用这种索引。 有时&#xff0c;即使有索引可以使用&#xff0c;MySQL 也不使用任何索引。…

【漏洞复现】E-office文件包含漏洞

漏洞描述 Weaver E-Office是中国泛微科技(Weaver)公司的一个协同办公系统。泛微 E-Office 是一款标准化的协同 OA 办公软件,实行通用化产品设计,充分贴合企业管理需求,本着简洁易用、高效智能的原则,为企业快速打造移动化、无纸化、数字化的办公平台。 该漏洞是由于存在…

巨人互动|游戏出海游戏出海效果怎样?

游戏出海是指将原本面向国内市场的游戏产品进行调整和优化&#xff0c;以适应海外市场的需求&#xff0c;并进行推广和销售。下面小编讲讲关于游戏出海对于游戏效果的影响的一些讨论点。 1、市场扩大 通过游戏出海&#xff0c;可以将游戏产品的目标受众从国内扩展到全球范围内…

Zebec Protocol 成非洲利比亚展会合作伙伴,并将向第三世界国家布局

在 9 月 6 日&#xff0c;The Digital Asset Summit ’23&#xff08;利比亚大会&#xff09;在尼日利亚首度阿布贾的 NAF 会议中心举办&#xff0c;该会议对 Web3 领域在非洲地区的发展进行了探索&#xff0c;旨在推动非洲地区区块链产业的进一步发展&#xff0c;据悉该会议室…