uview indexList 按字母跳转不了

news2025/2/25 15:35:14

 点击字母跳转不到位的问题:在<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)
              //目标位置的节点:类或者id
              uni
                  .createSelectorQuery()
                  .select('.container')
                  .boundingClientRect((res) => {
                    console.log(data, res)
                    console.log(">>res.top", res.top)

                    //最外层盒子的节点:类或者id
                    this.$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.coloradmin.cn/o/990868.html

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

相关文章

法国新法案强迫 Firefox 等浏览器审查网站

导读Mozilla 基金会已发起了一份请愿书&#xff0c;旨在阻止法国政府强迫 Mozilla Firefox 等浏览器审查网站。 据悉&#xff0c;法国政府正在制定一项旨在打击网络欺诈的 SREN 法案 (“Projet de loi Visant scuriser et reguler lespace numrique”)&#xff0c;包含大约 2…

将本地jar包手动添加到Maven仓库依赖处理

一、起因 在日常开发中&#xff0c;经常会遇到一些情况&#xff0c;就是在更新Maven时&#xff0c;从网上下载jar包的时候网络不稳定或者其他原因导致jar包数据缺失而导致的依赖无法正常引入的情况. 还有一些其他情况如个人jar包一类的。 二、解决 以前以上这些情况&#x…

三维模型3DTile格式轻量化压缩处理效率提高的技术方浅析

三维模型3DTile格式轻量化压缩处理效率提高的技术方浅析 随着三维模型在各个领域的广泛应用&#xff0c;对于其格式的轻量化压缩处理和效率提高的需求也越发迫切。本文将介绍一些技术方法&#xff0c;帮助实现三维模型3DTile格式的轻量化压缩处理并提高处理效率。 首先&#x…

手写Spring:第14章-自动扫描Bean对象注册

文章目录 一、目标&#xff1a;自动扫描Bean对象注册二、设计&#xff1a;自动扫描Bean对象注册三、实现&#xff1a;自动扫描Bean对象注册3.0 引入依赖3.1 工程结构3.2 Bean生命周期中自动加载包扫描注册Bean对象和设置占位符属性类图3.3 主力占位符配置3.4 定义拦截注解3.4.1…

从零到MySQL性能优化大师

一.MySQL架构 二.优化与执行 执行计划是MySQL优化器为了优化查询而生成的一种数据结构&#xff0c;它记录了数据库系统执行查询时所采取的操作流程&#xff0c;即对查询语句的各部分如何进行处理以最终得到查询结果的过程。执行计划通常被表示为一棵树状结构&#xff0c;节点代…

编程语言的类型划分

汇编语言 低级语言&#xff0c;通过汇编器翻译成机器语言 MOV、PUSH、ADD等 特点&#xff1a; 对机器友好、执行效率高、移植性差。 人类操作不太方便&#xff0c;需要专业人员。 高级语言 C、C、Java、Python、Golang等 最终还是会转化成为机器语言。 执行过程划分 编译型 ●…

华为云云耀云服务器L实例评测|使用Linux系统与Docker部署.net/c#项目

目录 前言 如何在CentOS运行项目 登录CentOS 使用Rider打包 使用Visual Studio打包 项目运行 后台运行 开放端口 如何在Docker中运行项目 项目运行 前言 本章详细介绍&#xff0c;.net Core项目从打包到部署上华为云云耀云服务器L实例的过程与一些细节问题。在这里…

XFF漏洞利用([SWPUCTF 2021 新赛]Do_you_know_http)

原理 常见的存在HTTP头注入的参数 User-Agent&#xff1a;使得服务器能够识别客户使用的操作系统&#xff0c;浏览器版本等.&#xff08;很多数据量大的网站中会记录客户使用的操作系统或浏览器版本等存入数据库中&#xff09; Cookie&#xff1a;网站为了辨别用户身份进行se…

前端js下载zip文件异常问题解决

目录 一&#xff0c;本文解决问题如下 二&#xff0c;原下载代码 1&#xff0c;ajax get 下载文件 2&#xff0c;下载异常图&#xff1a; 三&#xff0c;成功下载的 1&#xff0c; JQuery 实现文件下载xhr 2&#xff0c;图例 引言&#xff1a; 本人使用的ajax 下载&…

量化:基于支持向量机的择时策略

文章目录 参考机器学习简介策略简介SVM简介整体流程收集数据准备数据建立模型训练模型测试模型调节参数 参考 Python机器学习算法与量化交易 利用机器学习模型&#xff0c;构建量化择时策略 机器学习简介 机器学习理论主要是设计和分析一些让计算机可以自动“学习”的算法。…

Mybatis日期检索格式报错

问题复现 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.lang.IllegalArgumentException: invalid comparison: java.util.Date and java.lang.String ##…

适用于Linux的Windows子系统(PHP搭建lmap、redis、swoole环境)

目录 前言 一、Windows安装Linux子系统 二、Ubuntu搭建PHP开发环境 1.PHP 安装 2.Apache2 安装 3.MySQL安装 4.Redis安装 5.Swoole安装 总结 前言 系列分为三章&#xff08;从安装到项目使用&#xff09;&#xff1a; 一、适用于Linux的Windows子系统&#xff08;系统安装步骤…

提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除

文章目录 探索最新AR/VR应用在教育、游戏、医疗等领域的应用教育领域游戏领域医疗领域 深入了解Android内存管理与性能优化的方法与技巧垃圾回收机制内存泄漏使用弱引用避免过度渲染内存优化图像优化延迟加载Android中的调试技术应用程序分析 分享如何提高Android应用的易用性和…

服贸会2023 | 希尔贝壳入选“智赋百业”人工智能融合发展与安全应用典型案例

9月6日&#xff0c;服贸会&#xff08;中国国际服务贸易交易会&#xff09;“2023人工智能融合发展与安全应用”论坛在国家会议中心举行&#xff0c;论坛由国家工业信息安全发展研究中心、世界贸易网点联盟主办&#xff0c;旨在促进人工智能领域贸易合作&#xff0c;充分发挥人…

生动理解深度学习精度提升利器——测试时增强(TTA)

测试时增强&#xff08;Test-Time Augmentation&#xff0c;TTA&#xff09;是一种在深度学习模型的测试阶段应用数据增强的技术手段。它是通过对测试样本进行多次随机变换或扰动&#xff0c;产生多个增强的样本&#xff0c;并使用这些样本进行预测的多数投票或平均来得出最终预…

OpenCV(二十九):图像腐蚀

1.图像腐蚀原理 腐蚀操作的原理是将一个结构元素&#xff08;也称为核或模板&#xff09;在图像上滑动&#xff0c;并将其与图像中对应位置的像素进行比较。如果结构元素的所有像素与图像中对应位置的像素都匹配&#xff0c;那么该位置的像素值保持不变。如果结构元素的任何一个…

【软考】系统集成项目管理工程师(三)信息系统集成专业技术知识③

一、云计算 1、定义 通过互联网来提供大型计算能力和动态易扩展的虚拟化资源&#xff1b;云是网络、互联网的一种比喻说法。是一种大集中的服务模式。 2、特点 &#xff08;1&#xff09;超大规模&#xff08;2&#xff09;虚拟化&#xff08;3&#xff09;高可扩展性&…

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;图形…

创邻科技图数据库课程走进一流高校

《图数据库原理和实践》 正式开课&#xff01; 最近&#xff0c;浙江大学计算机学院新开了一门名为 《图数据库原理和实践》 的新课程&#xff0c;该课程由创邻科技和浙江大学联合推出&#xff0c;吸引了许多学生踊跃参与&#xff01; 曾为浙大学子的创邻科技CTO周研博士作为…

「Java开发指南」在MyEclipse中的Spring开发(一)

MyEclipse v2023.1.2离线版下载(Q技术交流&#xff1a;742336981&#xff09; 1. 什么是Spring&#xff1f; 在MyEclipse中引入Spring比大多数框架更难&#xff0c;因为它不是一种单一用途的技术。Spring被认为是Java软件开发在几乎每个领域都有最佳实践的巨大框架&#xff0…