关于uniapp u-index-list索引列表组件v-show的一些问题

已于 2022-07-06 15:14:56 修改
阅读量2.5k 收藏 1
点赞数
文章标签： 前端 vue.js
于 2022-07-06 14:23:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014003643/article/details/125638507
版权

u-index-list索引列表组件v-show问题，u-index-anchor锚点会默认出现最后一组数据的索引一开始找不到什么原因就使用css强制让锚点先隐藏锚点默认给右边索引的第一位scrollTop设置为0，本以为就此解决了这个问题，万万没想到 当数据比较少的时候问题又出现了，不得已就去研究了组件的源码，发现当u-index-listv-show隐藏时节点返回的信息top和height都是为0

而锚点的计算就是根据这两个值去计算的 所以才会默认显示数据的最后 一条的索引，解决方法就是在u-index-list组件加一个ref，点击显示的时候在掉用一次u-index-list组件里的updateData()方法 

this.$refs.uIndexList.updateData()

这样他就会重新获取最新的节点信息，这样就解决了 

<
最低0.47元/天 解锁文章
我是一个前端菜鸟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uView2.0 u-index-list 添加#点击不生效
six_teen的博客
12-07 4205
uview组件迎来了一次重大更新，当然现在的uview2.0版本还在测试当中组件有些小bug都是很正常的，最近在使用u-index-list这个组件时遇到了一个bug,先展示问题： 这个页面的代码是直接复制的官方示例： 示例地址：https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/indexList/indexList.nvue 细心的朋友可能就发现了这只有A-Z 26个字母，如果昵称都匹配不到呢，在微信和QQ上都会多一个#，以此
移动端效果之IndexList详解
12-29
写在前面 接着前面的移动端效果讲，这次讲解的的是IndexList的实现原理。效果如下： 代码请看这里：github 移动端效果之swiper 移动端效果之picker 移动端效果之cellSwiper 1. 核心解析 总体来说的原理就是当点击或者滑动右边的索引条时，通过获取点击的索引值来使左边的内容滑动到相应的位置。其中怎样滑动到具体的位置，看下面分解： 1.1 基本html代码 <div class=indexlist> <ul class=indexlist-content id=content> <!-- 需要生成的内容 --> </ul> <div cl
uview框架 u-index-list 组件高度自定义调整
qq_29714999的博客
11-11 1040
使用uview框架2.0版本中的u-index-list组件高度自定义调整
uview-ui_components_u-index-list_u-index-list.vue
qq_37707731的博客
01-15 2010
<template> <!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" --> <view> <view class="u-index-bar"> <slot /> <view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.p...
uniapp：uivew中u-index-list点击右侧索引实现锚点，解决索引列表右侧点击无效问题,解决select方法失效
qbbhgn的博客
11-17 1377
uview中提供了一个select方法，很多人写了之后发现没用，因为锚点的实现并不需要此方法 直接在u-index-anchor添加id和index就可以了
u-view使用记录-IndexList 索引列表
H763857881的博客
08-18 6272
u-view IndexList 索引列表问题使用记录 最近项目中使用了自定义导航栏，然后uview的索引列表的使用出了点问题，记录下自己的解决方法 根据文档加了offset-top属性后，ABC这行分隔的是移动到了需要的位置，内部的数据还是移动到了top为0的地方 方法 找到uview-ui里的u-index-list文件，注释这段代码，这部分的移动，并没有计算传进来的offset-top属性，可能之后的版本会修复吧 给右侧索引加个id 点击时，移动整个列表，圈中部分是头部和列表上面其他元素的高度
uniapp 多端兼容开发遇到的问题总结（四) ——专题：uView在弹出层里使用索引列表
NurTuam—何永杰
11-06 7530
前言 在使用uView开发项目中，遇到了一个业务场景： 点击输入框弹出底部窗口，内置电话号码区号索引列表，点击切换区号 : 当我根据逻辑以为在 u-popup 里加入 u-index-list 就行了，结果遇到问题了： 索引列表滚动不了； 选择索引字符，列表吸顶不了； 瞄点与顶部距离有偏差。 所以作者开始排查，但api文档没写相关用法，于是开始百度，但发现大家都在询问…（可能大家也百度过这类文章：https://ask.dcloud.net.cn/question/103729） 于是作者只能去修改源
uni-swipe-action组件实现列表项左划操作
02-19
应用uni-swipe-action组件实现列表项左划操作。 真正做到开箱即用。
基于vue的tab-list类目切换商品列表组件的示例代码
10-15
主要介绍了基于vue的tab-list类目切换商品列表组件的示例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
react-native-largelist：React Native的最佳大型列表组件
02-05
react-native-biglist React-native-largelist是React-Native的非常高性能的大型列表组件。 （iOS和Android）现在可以使用V3。...yarn add react-native-spring-scrollview react-native-largelist-v3 react-nati
react-native-editable-list:React Native的可编辑列表组件
05-03
React Native的可编辑列表组件。 安装 npm install --save react-native-editable-list 用法 import React , { useState } from 'react' ; import { StyleSheet , Text , View , FlatList , TextInput , ...
umy-ui封装，支持虚拟加载
11-10
在umy-ui中，虚拟加载列表功能通常通过一个名为“super-ux-table”的组件来实现。这个组件设计用于处理大量数据，比如表格数据。传统的表格组件会一次性渲染所有行，当数据量过大时，会导致页面加载慢，用户体验下降...
【uniapp Uview】 IndexList用法 姓氏分组方法
YhWyl527的博客
06-22 2879
在这里我们用到一个js方法 data_letter_sort 首字符姓氏分组 <template> <view> <u-index-list :scrollTop="scrollTop" > <view v-for="(item, index) in indexList" :key="index"> <u-index-anchor :index="item.name" /> <view class="list-
【vue】使用uni-indexed-list组件点击获取下标详情
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
07-02 1028
找到setList函数，对内部逻辑赋值就行了修改。如果有不懂可以留言，我看到了应该会回复。踩坑不易，还希望各位大佬支持一下。评论，你的意见是我进步的财富！如有错误，请多多指教。
关于 uview 的indexList跳转不到位的问题：添加方法@select=“clickSelect“
weixin_63515766的博客
01-12 1493
关于 uview 的indexList跳转不到位的问题
【uniapp索引列表】移动端uniapp使用uni-indexed-list索引列表方法，增加图片头像方法，覆盖全屏解决办法
seeeeeeeeeee的博客
04-06 5185
最近做到了一个移动端联系人列表功能但是不让使用移动端的ui库，只能使用uniapp的组件所以就发现了这个索引列表组件但是使用过后发现有一点问题，比如我需要头像，但是他没有自带图片功能。比如我使用过后，我自定义了导航栏但是被覆盖住了，把导航栏顶没了。这里我都一一的解决了，所以这里记录一下。完整代码直接发出来看吧问题点是：这个组件给自己的最外层盒子加了个定位，在这里所以就造成了他是脱离文档流的，然后会导致比如你再上写了其他的组件比如搜索栏，
uniapp插件索引列表uv-index-list增加返回头部的按钮
b734775358的博客
09-21 622
发现这里用getIndexListLetter获取了触摸点的坐标，然后用下面的setValueForTouch方法执行跳转事件，获取坐标的方法不用管，直接看到setValueForTouch，会看到里面是根据getIndexListLetter获取的触摸点对应的索引index执行了跳转，刚才已经在页面上增加了一个↑的索引了，所以这里要减去↑的偏移量，并且设置↑对应滚动的id：uv-index-item-header。到这里，基本跳转就都OK了，最后把点击索引显示的气泡加上。
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 473
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
uniapp u-upload多张图片回显
07-20
您可以使用uniapp的u-upload组件来实现多张图片的上传和回显功能。以下是一个示例代码： ```html <template> <view> <u-upload :max-count="3" // 设置最大上传图片数量 :preview="true" // 开启预览功能 :default-list="imageList" // 设置默认的图片列表 @success="handleSuccess" ></u-upload> </view> </template> <script> export default { data() { return { imageList: [] // 图片列表 }; }, methods: { handleSuccess(result) { this.imageList = result.files.map(file => file.url); } } }; </script> ``` 在上述代码中，我们使用了u-upload组件来实现图片的上传和回显功能。通过设置`max-count`属性，我们可以指定最大上传图片数量。开启`preview`属性后，用户可以预览已上传的图片。 在`default-list`属性中，我们将`imageList`数组作为默认的图片列表。当用户上传或删除图片时，`handleSuccess`方法会被调用，并将已上传的图片URL存储在`imageList`数组中。 请注意，以上代码只是一个简单示例，您可能需要根据自己的业务需求进行适当的修改和扩展。另外，您还需要根据后端接口的实际情况来处理图片的上传和回显逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值