uView2.0 u-index-list 添加#点击不生效
uview组件迎来了一次重大更新,当然现在的uview2.0版本还在测试当中组件有些小bug都是很正常的,最近在使用u-index-list这个组件时遇到了一个bug,先展示问题:这个页面的代码是直接复制的官方示例:示例地址:https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/indexList/indexList.nvu
在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
处,所以不要搞混了!!!
然后保存所修改的地方,再次运行就可以了。
更多推荐
所有评论(0)