小程序使用Vant weapp的索引欄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區域異常

恍然大悟:
今日基本都在思考IndexBar爲何不能正常顯示。晚上才考慮到可能是嵌套在下拉框的緣故。搭了個小程序的框架,在單頁面實現vant的IndexBar,可以正常顯示與定位。因此可以斷定,索引效果失敗,是與下拉框嵌套的緣故。

查看源代碼
在這裏插入圖片描述
根據上圖源碼,indexBar是可以正常賦值給目標函數,

if (anchor) {
    anchor.scrollIntoView(this.scrollTop);
    this.$emit('select', anchor.data.index);
}

下拉框dropdown與indexBar互相沖突。具體是在哪塊呢?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章