类似小米商城的图文列表选择定位如何实现

类似小米商城的图文列表选择定位如何实现，可以看：出左右都是图文列表，或者左表格右图文列表。可以话给个工程文件万分感谢。

功能：左右都是联动的，并不是用过滤筛选，左边上下滑动点击后，右边跟着滚动定位，右边上下滑左边跟着滚动定位
目前尝试几种方法都不成功：1）电梯菜单2）滚动到指定对象

wwbb 发表于 2024-10-9 10:19
导航菜单与图文列表结合实现页面定位功能 - 活字格专区 - 格友杂谈 - 葡萄城开发者社区 (grapecity.com ...

感谢大佬的帮助，666~~~

感谢用户wwbb大佬的帮助~~~
非常期待大佬分享工程文件
这边会有金币相送哦！

wwbb 发表于 2024-10-8 20:24
楼主是用什么方式进行定位的？

动态数据滚动到当前位置，我用的是单选按钮或者el菜单绑定数据源与图 ...

大哥做个工程文件给我吧。左右都是动态取数据库的，目前大部分APP都是这样的，比如：饿了吗，美团，小米商城，联想商城，华为商城，都是主流设计了，活字格不能落后呀。谢谢！

benny111 发表于 2024-10-8 16:02
老大我贴子写了：目前尝试几种方法都不成功：1）电梯菜单2）滚动到指定对象
其中电梯菜单不支持从数据库 ...

楼主是用什么方式进行定位的？

动态数据滚动到当前位置，我用的是单选按钮或者el菜单绑定数据源与图文列表实现了定位的功能。但是没有滚动到当前位置选中菜单项的功能。

我抽时间做个教程出来，分享给你

我先说一下大致的思路，是用js的scrollIntoView属性实现定位的。通过点击选项的获取到要跳转的菜单值，遍历图文列表找到对应的图文列表的元素，然后再设置一个scrollIntoView属性即可。

下面是设置定位的代码

document.querySelector('#anchor').scrollIntoView({
  behavior: "smooth",
  // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
  block: "center",
  // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
  inline: "nearest"
  // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
})

大佬您好，前面想到的电梯菜单和页面上普通单元格关联，都是固定的，有实现的可能。若是菜单这一部分也需要从数据库读取的话，这个功能我这边也没有思路了。
菜单是动态的，那么右边的展示部分我猜应该也是从数据库中获取的数据，页面上的单元格位置不固定，这种情况下唯一可以确定的就是点击菜单的时候，获取的是哪一个分类，但是右边展示分类是动态变化的，很难获取到图文列表对应分类的单元格，也就做不到定位了。

Grayson.Shang 发表于 2024-10-8 10:29
大佬您好，根据咱们这个场景，可以通过电梯菜单插件和图文列表结合起来应该可以实现这个功能。

老大我贴子写了：目前尝试几种方法都不成功：1）电梯菜单2）滚动到指定对象
其中电梯菜单不支持从数据库获取，菜单只能写死。不适合这个场景

大佬您好，根据咱们这个场景，可以通过电梯菜单插件和图文列表结合起来应该可以实现这个功能。


电梯菜单 - 葡萄城市场 (grapecity.com.cn)

benny111 发表于 2024-10-9 06:31
大哥做个工程文件给我吧。左右都是动态取数据库的，目前大部分APP都是这样的，比如：饿了吗，美团，小米 ...

导航菜单与图文列表结合实现页面定位功能 - 活字格专区 - 格友杂谈 - 葡萄城开发者社区 (grapecity.com.cn)
我写了一篇帖子，分享了这个功能，楼主可以去看看。
下面是效果