index-bar组件加载慢问题

[kinmol]

js代码:

Page({
data: {
items: [],
"list": {
"A": [
"鞍山银行"
],
"B": [
"渤海银行",
"北京银行",
"本溪商业银行",
"保定银行"
],
"C": [
"长安银行",
"常熟农商银行",
"重庆农村商业银行",
"重庆三峡银行",
"重庆银行",
"长治市商业银行",
"朝阳银行",
"长沙银行",
"成都农商银行",
"长城华西银行",
"沧州银行",
"承德银行"
],
"D": [
"大同银行",
"德州银行",
"东营银行",
"丹东银行",
"东莞农村商业银行",
"东莞银行",
"达州市商业银行",
"大连银行",
"大连农商行"
],
"E": [
"鄂尔多斯银行"
],
"F": [
"阜新银行",
"富滇银行",
"福建省海峡银行"
],
"G": [
"工商银行",
"光大银行",
"广发银行",
"赣州银行",
"甘肃省农村信用社联合社",
"甘肃银行",
"广东华兴银行",
"广东南粤银行",
"广东省农村信用社联合社",
"广州农村商业银行",
"广州银行",
"广西北部湾银行",
"广西壮族自治区农村信用社联合社",
"贵阳银行",
"贵州省农村信用社联合社",
"贵州银行"
],
"H": [
"华夏银行",
"恒丰银行",
"海南省农村信用社联合社",
"海南银行",
"汉口银行",
"湖北省农村信用社联合社",
"湖北银行",
"葫芦岛银行",
"湖南三湘银行",
"杭州银行",
"湖州银行",
"哈尔滨银行",
"黑龙江省农村信用社联合社",
"哈密市商业银行",
"邯郸银行",
"河北省农村信用社联合社",
"河北银行",
"衡水银行",
"河南省农村信用社联合社",
"华侨永亨银行"
],
"J": [
"建设银行",
"交通银行",
"江南农村商业银行",
"江苏省农村信用社联合社",
"江苏长江商业银行",
"江阴农商银行",
"晋城银行",
"晋商银行",
"晋中市商业银行",
"济宁银行",
"江西银行",
"江西省农村信用社联合社",
"九江银行",
"锦州银行",
"嘉兴银行",
"金华银行",
"吉林省农村信用社联合社",
"吉林银行",
"焦作中旅银行"
],
"K": [
"昆山农村商业银行",
"库尔勒市商业银行",
"昆仑银行"
],
"L": [
"莱商银行",
"临商银行",
"兰州银行",
"辽宁省农村信用社",
"辽阳银行",
"乐山商业银行",
"凉山商业银行",
"泸州市商业银行",
"柳州银行",
"龙江银行",
"廊坊银行",
"洛阳银行",
"辽宁辰州汇通村镇银行"
],
"M": [
"民生银行",
"绵阳市商业银行"
],
"N": [
"农业银行",
"南京银行",
"宁夏银行",
"宁波通商银行",
"宁波东海银行",
"宁波银行",
"内蒙古农村信用社联合社",
"内蒙古银行"
],
"P": [
"浦发银行",
"平安银行",
"盘锦商行",
"攀枝花市商业银行",
"平顶山银行"
],
"Q": [
"青岛银行",
"青海农村信用社联合社",
"青海银行",
"齐鲁银行",
"齐商银行",
"曲靖市商业银行",
"泉州银行",
"秦皇岛市商业银行"
],
"R": [
"日照银行"
],
"S": [
"上海银行",
"深圳农村商业银行",
"石嘴山银行",
"陕西省农村信用社联合社",
"苏州银行",
"上饶银行",
"盛京银行",
"顺德农商银行",
"四川天府银行",
"四川省农村信用社联合社",
"遂宁银行",
"上海农村商业银行",
"绍兴银行"
],
"T": [
"天津滨海农村商业银行",
"天津银行",
"太仓农村商业银行",
"泰安银行",
"铁岭银行",
"台州银行",
"唐山银行"
],
"W": [
"徽商银行",
"无锡农村商业银行",
"吴江农村商业银行",
"威海市商业银行",
"潍坊银行",
"乌海银行",
"武汉农村商业银行",
"温州银行",
"乌鲁木齐银行"
],
"X": [
"兴业银行",
"新疆汇和银行",
"新疆农村信用社联合社",
"新疆银行",
"厦门国际银行",
"厦门银行",
"邢台银行",
"西藏银行"
],
"Y": [
"邮政银行",
"鄞州银行",
"阳泉商业银行",
"烟台银行",
"营口沿海银行",
"营口银行",
"雅安市商业银行",
"宜宾市商业银行",
"云南红塔银行",
"云南省农村信用社联合社",
"玉山银行"
],
"Z": [
"中国银行",
"中信银行",
"浙商银行",
"张家口银行",
"张家港农商行",
"枣庄银行",
"珠海华润银行",
"自贡银行",
"浙江民泰商业银行",
"浙江泰隆商业银行",
"浙江稠州商业银行",
"浙商银行",
"郑州银行",
"中原银行"
]
},
order_id: '',
data: [],
matchedResults: [],
state: false,
},
onLoad(order_id) {
this.setData({
items: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(u => {
return {
label: u
}
}),
order_id: order_id.order_id
});
// this.banklist();
},
banklist() {
getBankList().then(res => {
this.setData({
list: res.list
})
})
},
onChange(item) {
const inputValue = item.trim().toLowerCase();
const matchedResults = {};
for (const key in this.data.list) {
const filteredResults = this.data.list[key].filter(item => item.toLowerCase().includes(inputValue));
if (filteredResults.length > 0) {
matchedResults[key] = filteredResults;
}
}

this.setData({
  data: matchedResults
});
if (matchedResults) {
  this.setData({
    state: true
  })
}
if (!item) {
  this.setData({
    state: false
  })
}

},
setCheck(item) {
my.navigateTo({
url: '/pagesA/pages/bankCardDK/addBank/addBank?bank=' + item.currentTarget.dataset.item + '&order_id=' + this.data.order_id
})
},

onConfirm(value) {
my.alert({
content: value,
});
}
});

view页面:






取消




{{item}}








{{item}}

css：
.base {
width: 100%;
height: 100vh;
}

.indexbar {
position: fixed;
right: 10px;
top: 20vh;
}

.container {
display: flex;
align-items: center;
padding: 16px;
}

.search-bar {
padding: 4px 0 4px 0;
border-radius: 4px;
border: 1px solid transparent;
transition: all 0.4s;
flex: 1;
}

.search-bar-focus {
border-color: #1677ff;
}

.cancel {
color: #333333;
margin-left: 8px;
}

.nav_list {
background: #FFFFFF;
border-radius: 20rpx;
margin-top: 30rpx;
}

.nav_item {
padding: 26rpx 32rpx;
}

.nav_item .title {
flex: 1;
font-size: 30rpx;
padding-left: 33rpx;
}

.nav_item+.nav_item {
border-top: 1px solid #eeeeee;
}

.title {
font-size: 28rpx;
color: #666666;
margin-top: 25rpx;
}
json:
{
"defaultTitle": "选择要绑定的银行卡类型",
"allowsBounceVertical": "NO",
"usingComponents": {
"index-bar": "antd-mini/es/IndexBar/index",
"list": "antd-mini/es/List/index",
"list-item":"antd-mini/es/List/ListItem/index",
"ant-input": "antd-mini/es/Input/index",
"ant-icon": "antd-mini/es/Icon/index",
"ant-button": "antd-mini/es/Button/index"

}
}

[kinmol]

取消 {{item}} {{item}}

[rayhomie]

麻烦重新按markdown的code格式改下格式，发存文本格式太乱了，axml页面代码不懂。

[rayhomie]

npm i antd-mini@^2.28.2 试试