在uview官网,本人pr之后u-index-list可以接收unicode字符,不在需要使用如下的修改了,可以直接使用了

uview在更新的版本2.0.10,接受了我的pr(pull request),所以现在默认支持 # 符号了,不传indexList,默认有 # 符号,如果传indexList的话需要使用 _ 来代替 # 号,虽然传的是 _ 但是页面最终显示的会是 #

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手动添加一个#,如图:
在示例源码处修改如下:

a) 在示例源码的第2行

<u-index-list :indexList="indexList">

在示例源码的第49行,添加上图中全红的代码
在这里插入图片描述
添加代码后保存,再次运行,点击#,你会发现页面不动,但点击Z,却能跳过去,而且控制台还有错误输出:
在这里插入图片描述
这个错误的意思,我觉得应该是命名问题,就像变量名那样,不能以一些奇奇怪怪的符号,所以像什么$在这里也是不行的,但是_下划线是可以的,所以加上面修改的代码中的#换成_,结果如图:
在这里插入图片描述
如果你觉得这里就能满足你的需求了,那也算是解决问题了。
但是就是会有比较轴的朋友(比如我),就想把这个改成#

在阅读了一下uview的u-index-list,u-index-item,u-index-anchor的源码后找到了解决办法(当然是初略的阅读了,并且发现与u-index-item毫无关系)
解决办法就是,让页面以#展现,但是在id处以_展现:
展示一下最终效果:
在这里插入图片描述
接下来就是修改源码了:
首先找到u-index-list组件的源码:
第67行处修改成这样:
在这里插入图片描述
第88行处修改成这样:
在这里插入图片描述
代码意思也很简单就是一个三元运算,遇到_就用#代替
这两处修改完后。
接下来就是u-index-anchor源码了:
第19行处:
在这里插入图片描述
第68行处:
在这里插入图片描述
注意只有在这里是遇到#转为_,因为这里设置的正是id处,所以不要搞混了!!!

然后保存所修改的地方,再次运行就可以了。

Logo

前往低代码交流专区

更多推荐