小程序使用Vant weapp的下拉框组件dropdown嵌套索引栏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-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.关于无法跳转到正常锚点
-------未正常配置组件,与我的问题无关

2.关于底部Z区域异常

-----后期可能会碰到的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,并对思路整理如下:

  1. 点击下拉框,触发事件,显示indexBar;
  2. 固定下拉框,滑动时顶部下拉框吸顶;
  3. indexBar设置点击效果,变色,打钩;
  4. 点击事件结束,隐藏indexBar,赋值给下拉框;
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值