微信小程序楼层跳跃，滚动导航

最新推荐文章于 2022-01-06 16:34:35 发布

洛查丹玛斯

最新推荐文章于 2022-01-06 16:34:35 发布

阅读量1.2k

点赞数 1

文章标签：微信小程序前端楼层跳跃

本文链接：https://blog.csdn.net/qq_38197886/article/details/90404390

版权

本文介绍如何解决微信小程序中scroll-view滚动延迟问题，通过bindscroll事件结合自定义函数onScrollViewScroll实现实时楼层跳跃和导航。在onScrollViewScroll中，根据滚动距离更新当前显示的分类，并处理滚动方向，确保平滑的楼层切换体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述
scroll-view的滚动有延迟问题， bindscroll滚动函数执行完之后要用另一个函数（onScrollViewScroll）去操作结束时的位置，在这个函数中重新操作节点。
小程序js：
Page({
data: {
fruits: [
{ name: ‘apple’, num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
{ name: ‘banana’, num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
{ name: ‘orange’, num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
{ name: ‘pineapple’, num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
{ name: ‘watermelon’, num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }
],
// 当前分类的索引
currentCategory: 0,
// 每个分类距离顶部的高度的数组
productsTop: [],
categoryTop: 10000,
// 用于存储每次滚动结束之后的距离, 可用来判断滚动的方向
moveStartPos: 0,
// 点击分类的名称, 用于点击跳转
scrollInTo: ‘’
},
onLoad: function (options) {
},
onShow: function () {
// 页面准备完成之后获取每个分类距离顶部的高度, 存储在数组pr