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

最新推荐文章于 2022-04-24 20:28:51 发布

洛查丹玛斯

最新推荐文章于 2022-04-24 20:28:51 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_38197886/article/details/90404390

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
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 () {
// 页面准备完成之后获取每个分类距离顶部的高度, 存储在数组productsTop中
var query = wx.createSelectorQuery()
this.productsTop = []