实现左右菜单
滚动联动，修复底部点击
跳转问题。
1. 初始化better
-scroll：在Category.
vue中导入插件，初始化左右侧
滚动实例。
1）安装插件better
-scroll 插件，具体命令如下
yarn add @ /core@2.5
--save
2）导入better
-scroll核心库，定义左侧（left
Bscroll）和右侧（right
Bscroll）
滚动实例变量。
import
BScroll from " "; //导入better
-scroll核心库
let left
Bscroll = null //左侧
滚动实例
let right
Bscroll = null //右侧
滚动实例
3）编写初始化
滚动实例的函数。
左侧
滚动：配置click: true（允许点击）和mouseWheel: true（支持鼠标滚轮）。
右侧
滚动：除基础配置外，设置probeType: 3（实时监听
滚动事件），并绑定
scroll事件记录
滚动距离（通过
scrollY存储 Y 轴绝对值）。
const
scrollY = ref(0) // 右侧列表滑动的 y 轴坐标
// 初始化
BScroll
const init
BScroll = () => {
// 初始化左菜单
left
Bscroll = new
BScroll(" ", { //补全左侧容器类名
click: true,
mouseWheel: true,
});
// 初始化右菜单
right
Bscroll = new
BScroll(" ", { //补全右侧容器类名
click: true,
mouseWheel: true,
probeType: 3, // 实时派发
scroll 事件
});
// 监听右侧
滚动，更新
scrollY
right
Bscroll.on('
scroll', pos => {
scrollY.value = Math.abs(pos.y)
})
};
4）监听数据变化并重新初始化：当菜单数据（menus）更新后，通过watch监听，在nextTick中调用init
BScroll（确保 DOM 更新后初始化）。
watch(menus, () => {
nextTick(() => {
init
BScroll();
initRightHeight();
});
});
2.实现
滚动联动
1）单击左侧菜单项，右侧菜单
滚动到相应位置
在clickList方法中，添加下面代码，实现左侧菜单项点击时（clickList），通过rightLiTops（右侧各分类项的
顶部距离）获取目标位置，调用右侧
滚动实例的
scrollTo方法
滚动到对应位置。
const clickList = (index) => {
console.log(rightLiTops.value[index]);
scrollY.value = rightLiTops.value[index];
right
Bscroll. (0,
-scrollY.value); //补全
滚动方法
};
单击左侧菜单的最后一项时，右侧菜单可以
滚动到相应的位置，给出截图：
2）右侧菜单
滚动，激活左侧菜单项
①绑定左侧菜单项样式与ref：在左侧li标签中，通过:class绑定current激活样式（index === currentIndex时生效），并通过ref="menuList"绑定菜单项容器。
//在script中定义menuList
const menuList = ref()
//在template中修改左侧菜单项
<li class="menu
-item"
v
-for="(menu, index) in menus"
:key="index"
@click="clickList(index)"
:class="{ }" ref="menuList"
>
②计算当前激活的左侧索引：通过computed定义currentIndex，根据
scrollY判断右侧
滚动位置所在的分类区间，返回对应左侧索引（最后一个分类特殊处理）。
import { onMounted, watch, nextTick, ref, computed } from '
vue'
<script setup>
……（原有代码）
const currentIndex = (() => {
return rightLiTops.value.findIndex((top, index) => {
if (index === rightLiTops.value.length
- 2) {
return true
}
if (
scrollY.value >= top &&
scrollY.value < rightLiTops.value[index + 1]) {
initLeft
Scroll(index)
return true
}
})
});
</script>
③左侧
滚动到激活项：编写initLeft
Scroll函数，通过menuList获取激活项元素，调用左侧
滚动实例的
scrollToElement方法将其
滚动到可视区域。
const initLeft
Scroll = (index) => {
const menu = menuList.value;
let el = menu[index];
left
Bscroll. (el, 300, 0,
-100);
};
④监听激活索引变化：通过watch监听currentIndex，当索引变化时调用initLeft
Scroll，确保左侧激活项始终可见。
( , (newIndex) => {
initLeft
Scroll(newIndex);
});
3. 修复底部
跳转问题：添加底部占位元素，调整高度。
1）添加底部占位元素：在右侧菜单容器（.menu
-right的ul）中添加cate
-bottom元素作为占位，避免底部内容被遮挡。
<div class="menu
-right" ref="itemList">
<ul>
<!
-- 原有分类li
-->
<li class="cate
-bottom"></li> <!
-- 底部占位
-->
</ul>
</div>
2）调整占位元素高度：编写RightHeightFix函数，获取占位元素并设置高度为右侧容器高度的 1/1.2（适配底部交互区域）。
<script setup>
……（原有代码）
const RightHeightFix = () => {
let bottom = itemList.value.getElementsByClassName('cate
-bottom')[0]
bottom.style.height = itemList.value.clientHeight / 1.2 + 'px'
}
</script>
3）组件挂载时执行修复：在onMounted钩子中，调用RightHeightFix（确保DOM渲染完成后设置高度）。
onMounted(() => {
loadCategoryList()
nextTick(() => {
()
})
})
在基于Vue开发的移动端应用中，遇到页面跳转后滚动位置不正确的问题。当从页面A滚动到一定位置后跳转到页面B，B页面会继承A页面的滚动位置。分析认为这可能由于Vue的keep-alive特性导致。为了解决这个问题，提出了在全局路由守卫中设置每次进入路由时重置窗口滚动位置的方案，即在beforeEach钩子中使用window.scroll(0,0)确保页面滚动始终从顶部开始。
扫一扫
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
