请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Freya.Li
中级会员   /  发表于:2021-10-27 10:23  /   查看:2339  /  回复:0
之前有同学看了如下的教程之后,提出比如有10个tab,我在一个页面里面展示不下,于是想要导航的部分能够滑动,这样就能够显示更多的tab标题了。
一看就会,超有用活字格技能:一百二十、页面切换自定义导航栏效果
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=99155&fromuid=64825
(出处: 葡萄城产品技术社区)

话不多说,具体实现效果如下图所示:

滑动tab效果.gif293634032.png

在看这篇文章之前,首先需要先将一百二十、页面切换自定义导航栏效果的逻辑搞懂,之后我们再继续下面
要做出能够滚动的导航栏的效果,我们要依赖页面容器来实现
步骤一:页面上设置一个页面容器的区域,设置子页面为导航页面,并且设置子页面的溢出模式为滚动模式
image.png64805296.png

步骤二:给主页面的单元格命名,因为我们需要在导航的子页面中,用到父页面的单元格,这个时候就需要使用名称管理器,也就是给主页面的单元格命名。
对于名称管理器还不知道的同学可以参考:https://help.grapecity.com.cn/pa ... ion?pageId=56528290
image.png752409362.png
image.png645336608.png


步骤三:编辑导航子页面,添加要显示的条目
image.png68883971.png
设置页面点击命令,使用父页面的单元格名称
image.png516692199.png
设置选中tab下方的横线,使用条件格式
image.png903048400.png

步骤四:运行起来,这里不要使用内置的手机调试,直接使用Chrome的手机调试模式
具体不会的同学参考如下:
一看就会,超有用活字格技能:六十五,更靠谱的手机模拟器
https://gcdn.grapecity.com.cn/fo ... 3&fromuid=64825
(出处: 葡萄城产品技术社区)


运行起来之后你会发现页面容器底下出现了滚动条,那我们是不需要的

步骤五:去掉页面容器的滚动条
添加navigation类
image.png656303710.png

把滚动条隐藏
image.png679265136.png

工程文件参考附件~
页面切换实现多tab支持滚动.fgcc (89.31 KB, 下载次数: 89)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部