Vant框架中关于IndexBar索引栏的CDN单页面引用攻略
关于Vant框架中IndexBar索引栏以CDN的方式单页面引用攻略
在使用vant时因为很多官方示例以及文档对于某些可能出现的错误并没有说详细说明,这里也是踩了很多的坑。因为平时都是单页面引用并不需要以脚手架的形式创建应用,所以实际上遇到的问题会更多!
如果你也是通过CDN方式引用的vant框架时首先你需要注意一个很特别的问题点,在很多官方示例中给出的代码大部分都是单标签的形式存在,这种方式在CLI项目中确实不会存在问题,但是当你尝试把一段官方示例代码粘贴到H5页面中调用时你可能会发现内容显示不完全或者样式行为不正常等情况,不要以为是官方代码有问题2333 其实解决的方法很简单~尝试把所有单标签替换成双标签例如:
可以从官方示例和本地结果看出最终效果明显有问题,原因之前也说过了,此时我们再把单标签替换成双标签后就会正常显示了:
至此终于是解决了第一个坑了,但福如双至 祸不单行,紧接着在使用索引栏时我又遇到了另一个问题:单击右侧索引栏时无法正常跳转到对应锚点!
在我正确的了解到了写法时完整的写完一个索引栏后却遇到了单击右侧索引栏无法跳转的问题
此时单击右侧索引栏是不会有任何反应的但是滑动是正常的,之前一直以为是需要编写一个方法来触发,看了官方文档后才发现了这个东西:
因为这里是自己提供的自定义数据,所以此时生成的标题头并没有绑定对应的index参数!因为官方示例中没有绑定index-list,所以他其实默认的值就是A-Z,当时当你绑定自己的index-list时就必须在IndexAnchor中手动绑定一次index,绑定完毕后就可以正常使用了:
最后问题就得以解决了!美汁汁~