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

收藏

之前有同学看了如下的教程之后，提出比如有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.png68883971.png

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

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

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

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

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

把滚动条隐藏

工程文件参考附件~

页面切换实现多tab支持滚动.fgcc (89.31 KB, 下载次数: 287)

		自动登录	找回密码
密码			立即注册

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

0 个回复