grid布局兼容性手机端（gridmanager兼容性）



hello大家好，这里是鸿蒙开天组，今天让我们来继续学习鸿蒙进阶篇-网格布局 Grid/GridItem，上一篇博文我们已经学习了固定行列、合并行列和设置滚动，这一篇我们将继续学习Grid的用法，实现翻页滚动、自定义滚动条样式，并实现一个小案例。

到这里就需要用到控制器对象了，核心步骤如下：

1. 创建 Scroller 对象（控制器对象）
2. 设置给 Grid
3. 调用 Scroller 对象的 scrollPage 方法

属于一看就会的代码，于是实现一个翻页滚动效果，当然也可以左右滑动啦：

实现代码如下：

滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll，如果默认的滚动条外观无法满足需求，我们还可以自定义滚动条：

第一步：首先通过 Grid 的 scrollBar 属性关闭滚动条

第二步：使用ScrollBar组件自定义滚动条

样例关键代码如下：

在上面代码的基础上，先来一个看着丑但足够显眼的滚动条：

代码如下：

最后，使用刚刚学习的自定义滚动条来完成滚动导航的滚动条：

嘿！一个丝滑又漂亮的滚动条就出来啦，注意咱们这里主要是做的滚动条，具体图标填充，可以自行使用其他图片测试哦！

代码如下：

好啦好啦，我知道大家可能对于最终的效果展示有点不满意，毕竟不够好看嘛，那就把图片给大家换一下，最终结果如下：

至于这么多图片，是不是要一个一个去下？其实不需要的，直接到以下链接，一个Ctrl+S就全部有了，然后选中前面20个丢进media文件夹里，完事：

最终代码：

好了，今天的分享到这里为止，感谢阅读，欢迎点赞收藏支持鼓励下！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/37447.html