【問題】
小程序使用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.關於無法跳轉到正常錨點
-------未正常配置組件
恍然大悟:
今日基本都在思考IndexBar爲何不能正常顯示。晚上才考慮到可能是嵌套在下拉框的緣故。搭了個小程序的框架,在單頁面實現vant的IndexBar,可以正常顯示與定位。因此可以斷定,索引效果失敗,是與下拉框嵌套的緣故。
查看源代碼
根據上圖源碼,indexBar是可以正常賦值給目標函數,
if (anchor) {
anchor.scrollIntoView(this.scrollTop);
this.$emit('select', anchor.data.index);
}
下拉框dropdown與indexBar互相沖突。具體是在哪塊呢?