找回密码
 立即注册

QQ登录

只需一步,快速开始

benny111

金牌服务用户

72

主题

167

帖子

651

积分

金牌服务用户

积分
651
benny111
金牌服务用户   /  发表于:2024-10-6 17:40  /   查看:531  /  回复:8
1金币
类似小米商城的图文列表选择定位如何实现,可以看:出左右都是图文列表,或者左表格右图文列表。可以话给个工程文件万分感谢。

功能:左右都是联动的,并不是用过滤筛选,左边上下滑动点击后,右边跟着滚动定位,右边上下滑左边跟着滚动定位
目前尝试几种方法都不成功:1)电梯菜单2)滚动到指定对象
附件: 您需要 登录 才可以下载或查看,没有帐号?立即注册

最佳答案

查看完整内容

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

8 个回复

倒序浏览
最佳答案
最佳答案
wwbb
初级会员   /  发表于:2024-10-6 17:40:06
来自 8#
本帖最后由 wwbb 于 2024-10-9 10:27 编辑
benny111 发表于 2024-10-9 06:31
大哥做个工程文件给我吧。左右都是动态取数据库的,目前大部分APP都是这样的,比如:饿了吗,美团,小米 ...


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
Grayson.Shang活字格认证 Wyn认证
超级版主   /  发表于:2024-10-8 10:29:17
2#
大佬您好,根据咱们这个场景,可以通过电梯菜单插件和图文列表结合起来应该可以实现这个功能。


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
benny111
金牌服务用户   /  发表于:2024-10-8 16:02:36
3#
Grayson.Shang 发表于 2024-10-8 10:29
大佬您好,根据咱们这个场景,可以通过电梯菜单插件和图文列表结合起来应该可以实现这个功能。

老大我贴子写了:目前尝试几种方法都不成功:1)电梯菜单2)滚动到指定对象
其中电梯菜单不支持从数据库获取,菜单只能写死。不适合这个场景
回复 使用道具 举报
Grayson.Shang活字格认证 Wyn认证
超级版主   /  发表于:2024-10-8 17:56:59
4#
大佬您好,前面想到的电梯菜单和页面上普通单元格关联,都是固定的,有实现的可能。若是菜单这一部分也需要从数据库读取的话,这个功能我这边也没有思路了。
菜单是动态的,那么右边的展示部分我猜应该也是从数据库中获取的数据,页面上的单元格位置不固定,这种情况下唯一可以确定的就是点击菜单的时候,获取的是哪一个分类,但是右边展示分类是动态变化的,很难获取到图文列表对应分类的单元格,也就做不到定位了。
回复 使用道具 举报
wwbb
初级会员   /  发表于:2024-10-8 20:24:06
5#
本帖最后由 wwbb 于 2024-10-8 20:34 编辑
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"
})
回复 使用道具 举报
benny111
金牌服务用户   /  发表于:2024-10-9 06:31:26
6#
wwbb 发表于 2024-10-8 20:24
楼主是用什么方式进行定位的?

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

大哥做个工程文件给我吧。左右都是动态取数据库的,目前大部分APP都是这样的,比如:饿了吗,美团,小米商城,联想商城,华为商城,都是主流设计了,活字格不能落后呀。谢谢!
回复 使用道具 举报
Levi.Zhang
超级版主   /  发表于:2024-10-9 10:13:22
7#
感谢用户wwbb大佬的帮助~~~
非常期待大佬分享工程文件
这边会有金币相送哦!
回复 使用道具 举报
Levi.Zhang
超级版主   /  发表于:2024-10-9 10:49:15
9#
wwbb 发表于 2024-10-9 10:19
导航菜单与图文列表结合实现页面定位功能 - 活字格专区 - 格友杂谈 - 葡萄城开发者社区 (grapecity.com ...

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

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部