Freya.Li 发表于 2021-10-27 10:23:54

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

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

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



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


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




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

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

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


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


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

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


把滚动条隐藏


工程文件参考附件~

页: [1]
查看完整版本: 一看就会,超有用活字格技能:一百二十三、页面切换自定义导航栏多tab滑动效果