小程序使用Vant weapp的下拉框组件dropdown嵌套索引栏IndexBar无法正常跳转至对应锚点且底部异常

最新推荐文章于 2026-05-18 09:23:25 发布

原创

最新推荐文章于 2026-05-18 09:23:25 发布 · 5k 阅读

标签

#小程序 #Vant #vant weapp

收录于

本文探讨了在使用Vantweapp UI库时遇到的问题，即IndexBar组件在特定环境下无法正常跳转至锚点且无变色效果。通过分析，发现此现象与组件嵌套于下拉框有关，并提出了两种解决方案：一是深入研究冲突函数，二是改变布局结构。

【问题】
小程序使用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