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

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()

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

组件数据

const letter = [ "A","B","C","D", "E", "F", "G", "H", "I","J","K","L", "M", "N", "O", "P", "Q","R","S","T","U","V","W", "X","Y", "Z",];

lists.forEach((t) => {

t.cn = t.name;

t.en = ChineseHelper.ConvertPinyin(t.name);

});

letter.forEach((item) => {

arr.push({ letter: item, data: [] });

});

arr.forEach((item) => {

lists.forEach((t) => {

if (t.en.substr(0, 1) == item.letter) {

item.data.push(t);

}

});

this.indexList = [];

this.countoryList = arr.filter((v) => {

if (v.data.length > 0) {

this.indexList.push(v.letter);

}

return v.data.length > 0;

});

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

uni-app 写小程序索引列表，仿微信通讯录
心里认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年 uni-app 写小程序索引列表,仿微信通讯录去uni-app官网下载插件 indexlist <m ...
uni-app - 城市选择索引列表 / 通过 A-Z 排序的城市列表（uview 组件库 IndexList 索引列表）
前言由于考虑到各端平台兼容性及其代码健壮性(无BUG),故采用 uview 组件库的 IndexList 索引列表组件作为 "底层" 支持,在此基础上二次封装,可靠性及稳定性毋 ...
uniapp：索引列表
uniapp:索引列表一.简单:uniapp:索引列表解释: 1.效果:通过点击右侧字母索引导航栏,滚动到对应区域. 2.实现思路:使用uni-app原生scroll-view组件的scroll- ...
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行（drop multiple rows in dataframe with integer index）
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行(drop multiple rows in dataframe with integer index) 目录
pandas使用query函数基于判断条件获得dataframe中满足条件的数据行(row)的索引列表（index of rows matching conditions in dataframe）
pandas使用query函数基于判断条件获得dataframe中满足条件的数据行(row)的索引列表(index of rows matching conditions in dataframe) ...
pandas使用dropna函数计算返回dataframe中不包含缺失值的行索引列表list（index of rows without missing values in dataframe）
pandas使用dropna函数计算返回dataframe中不包含缺失值的行索引列表list(index of rows without missing values in dataframe) 目录
【uniapp前端组件】仿微信通讯录列表组件
仿微信通讯录列表组件示例图前言仿微信通讯录列表组件,可实现通讯列表以及选择多个联系人功能. 组件介绍本组件有三个自定义组件构成,都已经集成在bugking7-contact-list中,该组件 ...
VUE+MintUI的索引列表实现“卖座网”同款城市列表
卖座网:https://m.maizuo.com/v5/#/city(F12拿城市列表JSON) MintUI索引列表:https://elemefe.github.io/mint-ui/#/inde ...
uView1.0 indexList索引列表遇到的坑
在使用uView索引列表做通讯录的时候遇到了几个问题先上图片问题1: 右侧的abcd首字母按钮点击错乱比如点了f 弹出显示的是a开头的人(应该是f开头的人才对) 通过排查发现传入这个右侧组件参 ...

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

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

最新文章

热门文章