当前位置: 首页 > 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":["呀","已"]}]

http://www.lryc.cn/news/159726.html

相关文章:

  • 安全模型中的4个P
  • 网站优化搜索引擎与关键词
  • aws-msk-托管kafka集群的简单使用(VPC内部访问:无验证和SASL认证)
  • Unity UGUI(二)核心组件
  • 代码随想录二刷第二天(Python)
  • Mybatis学习笔记1 Mybatis入门
  • Spark 管理和更新Hadoop token 流程
  • Android文件关联
  • java操作adb查看apk安装包包名【搬代码】
  • 【JAVA】Object类与抽象类
  • 【设计模式】二、UML 类图概述
  • 百望云亮相服贸会 重磅发布业财税融Copilot
  • vue 项目代码混淆配置(自定义插件适用)带配置项注释
  • 手写Spring:第7章-实现应用上下文
  • Java(三)逻辑控制(if....else,循环语句)与方法
  • 通过API接口实现数据实时更新的方案(InsCode AI 创作助手)
  • 分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测
  • el-dialog无法关闭
  • MATLAB算法实战应用案例精讲-【大模型】LLM算法(最终篇)
  • Mac brew -v 报错 fatal: detected dubious ownership in repository
  • Docker镜像、容器、仓库及数据管理
  • Java的选择排序、冒泡排序、插入排序
  • Vagrant + VirtualBox + CentOS7 + WindTerm 5分钟搭建本地linux开发环境
  • 关于Ajax
  • 打开转盘锁 -- BFS
  • 国标EHOME视频平台EasyCVR视频融合平台助力地下停车场安全
  • 【业务功能篇96】微服务-springcloud-springboot-认证服务-登录注册功能-Auth2.0-分布式session
  • 自造简易版音频进度条
  • 433MHz芯片在遥控应用市场中的优点
  • 基于Bert+Attention+LSTM智能校园知识图谱问答推荐系统——NLP自然语言处理算法应用(含Python全部工程源码及训练模型)+数据集