【问题】
小程序使用Vant weapp的索引栏IndexBar组件无法正常跳转至对应锚点,且无变色效果,但滚动正常。
Vant UI库是采用dist文件引入的方式导入。
按官方demo在xx.json引入组件
"van-index-bar": "../../dist/index-bar/index",
"van-index-anchor": "../../dist/index-anchor/index"
xx.js文件
// 索引字母数组
const indexList = [];
const charCodeOfA = 'A'.charCodeAt('0');
for (let i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i));
}
// page下的常量
activeTab: 0,
indexList,
scrollTop: 0,
// 回到顶部
onPageScroll(event) {
this.setData({
scrollTop: event.scrollTop
});
},
xx.wxml示例代码
<van-dropdown-item value="{{ airportCode }}" title="站点">
<van-index-bar index-list="{{ indexList }}">
<view wx:for="{{ indexList }}"
wx:for-item="item"
wx:key="{{item}}">
<van-index-anchor index="{{ item }}">标题1</van-index-anchor>
<van-cell title="文本" />
<van-cell title="文本" />
<van-cell title="文本" />
</view>
</van-index-bar>
</van-dropdown-item>
页面效果
只能始终在Z区域,且Z对应的内容没法显示。真是大坑连连。
查阅资料
1.关于无法跳转到正常锚点
-------未正常配置组件,与我的问题无关
-----后期可能会碰到的bug
结论:
今日基本都在思考IndexBar为何不能正常显示。晚上才考虑到可能是嵌套在下拉框的缘故。搭了个小程序的框架,在单页面实现vant的IndexBar,可以正常显示与定位。因此可以断定,索引效果失败,是与下拉框嵌套的缘故。
查看源代码
根据上图源码,indexBar是可以正常赋值给目标函数,
if (anchor) {
anchor.scrollIntoView(this.scrollTop);
this.$emit('select', anchor.data.index);
}
下拉框dropdown与indexBar互相冲突。具体是在哪块呢?上图的两个关键函数也正常调用。
思路1
研究scrollintoView、$emit函数内部与dropdown下拉框的实现有什么冲突。考虑到这是开源UI库,先在gihub上反馈了一下,等待答复。
思路2
让下拉框不再嵌套IndexBar,将IndexBar与下拉框并列放置。indexBar默认隐藏(display:none)。给下拉框设置监听事件,一旦toggle触发事件,使indexBar显示。
在项目里重新写了个testIndexBar页面,单独测试IndexBar,并对思路整理如下:
- 点击下拉框,触发事件,显示indexBar;
- 固定下拉框,滑动时顶部下拉框吸顶;
- indexBar设置点击效果,变色,打钩;
- 点击事件结束,隐藏indexBar,赋值给下拉框;