一看就会，超有用活字格技能：一百二十三、页面切换自定义导航栏多tab滑动效果

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

话不多说，具体实现效果如下图所示：



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


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




步骤三：编辑导航子页面，添加要显示的条目

设置页面点击命令，使用父页面的单元格名称

设置选中tab下方的横线，使用条件格式


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


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

步骤五：去掉页面容器的滚动条
添加navigation类


把滚动条隐藏


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

2021-10-27 10:23 上传

点击文件名下载附件