贵阳网站建设推广,网站域名归属权,网站维护需要学什么,wordpress编辑区最近做小程序的时候#xff0c;产品提了一个需求#xff1a;1.左侧的菜单栏和右侧的菜单可分别滚动#xff0c;滚动左侧不影响右侧#xff0c;滚动右侧左侧随之联动高亮显示所在的菜单分类。2.点击下方左侧导航菜单栏#xff0c;高亮显示被点击的菜单分类#xff0c;右侧…最近做小程序的时候产品提了一个需求1.左侧的菜单栏和右侧的菜单可分别滚动滚动左侧不影响右侧滚动右侧左侧随之联动高亮显示所在的菜单分类。2.点击下方左侧导航菜单栏高亮显示被点击的菜单分类右侧分类类别滚动到右侧顶部(类似于 HTML 里的锚点功能)。3.滚动右侧菜品分类详情时当该分类详情模块顶部接触到滚动区域的顶部左侧对应的导航菜单栏高亮并且显示在可视区域。如图因为之前用vue做过一次这个效果用了better-scroll在小程序中不支持。于是上网开始找资料。过程踩了很多坑这里不一一说了直接说实现(PS我用的是mpvue框架)html部分使用scroll-view组件不了解的可以去看官方文档scroll-view左侧的部分基本代码实现左侧菜单右侧的代码基本实现右侧接下来是JS部分思路1.首先获取左侧的菜单和右侧的分类类别的高度使用wx.createSelectorQuery().selectAll2.将右边的每个类别的高度获取后将高度累加形成一个区间3.左侧点击实现利用scroll-into-view实现类似于锚点的效果然后利用scroll-top的属性是左侧高亮的部分始终保持在视图区。因为scroll-into-view会引起右边的滑动所以利用checkFlag限制右侧的scroll事件函数的执行。左侧点击事件4.右侧的实现如上所说利用checkFlag限制右侧的scroll事件函数的执行。然后进入循环根据scroll事件里面的scrollTop的高度与获取的右侧分类的高度区间的值进行比对记录index的值然后高亮显示左侧并且左侧上滑对应的距离保证左侧高亮在可视区域。右侧滚动实现以上是左右联动的基本实现如有bug和可以改进的地方敬请指正不胜感激
