scroll-view tab跳转指定位置，active tab和实际的位置不一致
描述： scroll-view 在scroll-with-animation="true"情况下，使用tab切换scroll-into-view导致active tab和实际的位置不一致 解决方案：添加tab节流处理，一段时间内点击一次。不使用scroll-with-animation="true"滚动时不能点击tab
记录：使用scroll-with-animation="true"点击tab导致头部渐变效果很不协调
scroll-view白屏
描述：scroll view ios端在惯性滚动期间突然设置scroll-into-view导致内容白屏，点击后恢复 解决方案：牺牲体验：使用scroll-with-animation="true"，使之有滚动过程。京东购物详情：滚动时不能点击tabnike：上两种方案兼用
方案确定
无论是上述哪种情况，滚动时切换tab都会出现问题。 不在滚动的时候切换tab。 切换tab时不让其滚动。
体验至上，不使用scroll-with-animation；
附一：如何检测页面停止滚动
Page({
data: {
isScrolling: false, // 是否正在滚动
},
onScroll(e) {
// 设置滚动状态为 true
this.setData({ isScrolling: true });
// 清除之前的定时器，避免重复设置
if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout);
}
// 设置定时器，200ms 后认为滚动停止
this.scrollTimeout = setTimeout(() => {
this.setData({ isScrolling: false });
}, 200); // 200ms 是一个经验值，可以根据实际情况调整
},
onTabClick(e) {
if (this.data.isScrolling) {
return; // 如果正在滚动，则不执行点击逻辑
}
// 正常的 tab 点击逻辑
console.log("Tab clicked");
},
onUnload() {
// 页面卸载时清除定时器，防止内存泄漏
if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout);
this.scrollTimeout = null;
}
},
});附二：如何判断两个元素相交- 检测滚动距离
- IntersectionObserver api
// js
const app = getApp()
Page({
data: {
ratio: ["0%", "0%", "0%", "0%"],
current: 0
},
onLoad() {
const getCallback = (index) => ({
intersectionRatio
}) => {
console.log(index, intersectionRatio)
const newRatio = [...this.data.ratio]
newRatio[index] = Math.floor(intersectionRatio * 100) + "%"
this.setData({
ratio: newRatio,
current: index
})
}
const observe = (selector, callback) => {
this.createIntersectionObserver({
thresholds: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
nativeMode: true,
})
.relativeTo(".intersetion")
.observe(selector, callback)
}
observe("#box1", getCallback(0))
observe("#box2", getCallback(1))
observe("#box3", getCallback(2))
observe("#box4", getCallback(3))
},
})
// html
fixed 元素;
相交元素： {{current}}
{{ratio[0]}}
{{ratio[0]}}
{{ratio[0]}}
{{ratio[0]}}
{{ratio[1]}}
{{ratio[1]}}
{{ratio[1]}}
{{ratio[1]}}
{{ratio[2]}}
{{ratio[2]}}
{{ratio[2]}}
{{ratio[2]}}
{{ratio[3]}}
{{ratio[3]}}
{{ratio[3]}}
{{ratio[3]}}