产生这个bug的原因:当我们第一次滑倒底部点击A回到顶部成功,再次滑倒底部,再次点击A无法回到顶部,因为此时的scrollIntoView 对应的值还是A,需要将scrollIntoView对应的值清空,然后重新赋值A,即可解决
解决办法:滑动到顶部或者底部时,清空之前设置的scrollIntoId即可
onScrollToUpper={() => ()}
onScrollToLower={() => ()}
// 清除scrollIntoId
cleanScrollIntoId() {
({
scrollIntoId: ""
});
}
完整代码:
const citys = [
{
name: "A",
list: [
{
cityCode: "320001",
cityName: "阿坝"
},
{
cityCode: "320002",
cityName: "阿拉善"
},
{
cityCode: "320003",
cityName: "阿里"
},
{
cityCode: "320004",
cityName: "安康"
}
]
},
{
name: "B",
list: [
{
cityCode: "130600",
cityName: "保定市"
}
]
},
{
name: "C",
list: [
{
cityCode: "130800",
cityName: "承德市"
}
]
},
{
name: "H",
list: [
{
cityCode: "131100",
cityName: "衡水市"
},
{
cityCode: "320800",
cityName: "淮安市"
}
]
},
{
name: "M",
list: [
{
cityCode: "231000",
cityName: "牡丹江市"
}
]
},
{
name: "N",
list: [
{
cityCode: "320100",
cityName: "南京市"
}
]
},
{
name: "Q",
list: [
{
cityCode: "130300",
cityName: "秦皇岛市"
}
]
}, {
name: "S",
list: [
{
cityCode: "310000",
cityName: "上海市"
},
{
cityCode: "130100",
cityName: "石家庄市"
},
{
cityCode: "320500",
cityName: "苏州市"
}
]
},
{
name: "T",
list: [
{
cityCode: "140100",
cityName: "太原市"
},
{
cityCode: "130200",
cityName: "唐山市"
}
]
},
{
name: "W",
list: [
{
cityCode: "150300",
cityName: "乌海市"
}
]
},
{
name: "X",
list: [
{
cityCode: "320300",
cityName: "徐州市"
}
]
},
{
name: "Y",
list: [
{
cityCode: "320900",
cityName: "盐城市"
},
{
cityCode: "321000",
cityName: "扬州市"
},
{
cityCode: "140300",
cityName: "阳泉市"
}
]
},
{
name: "Z",
list: [
{
cityCode: "140400",
cityName: "长治市"
},
{
cityCode: "321100",
cityName: "镇江市"
}
]
}
]
/**
* 右侧字母索引的触发
*/
touchstartfn(e) {
var index = ;
var letter = [index].name;
({
scrollIntoId: letter
});
({
icon: "none",
title: letter
});
}
// 清除scrollIntoId
cleanScrollIntoId() {
({
scrollIntoId: ""
});
}
// 示例
<ScrollView
class="flex-left"
scrollY="true"
scrollIntoView={scrollIntoId}
scrollWithAnimation
onScrollToUpper={() => ()}
onScrollToLower={() => ()}
>
{((i, index) => {
return (
<View
key={index}
class="city-list"
onClick={e => (e)} // 这个不重要可以不管
>
<View
class="item-title item-a"
id={}
data-bigindex={index}
>
{} // 这里显示的城市name 如 A
</View>
{((j, o) => { // 这里显示的城名字 如:北京
return (
<View class="item" data-bigindex={index}>
{}
</View>
);
})}
</View>
);
})}
// 这里是右侧字母
{((item, idx) => {
return (
<View onClick={e => (e)}>
<View
class="scroll_list_chi"
data-id={}
data-index={idx}
data-bigindex={idx}
>
{}
</View>
</View>
);
})}