hello大家好，这里是鸿蒙开天组，今天让我们来继续学习鸿蒙进阶篇-网格布局 Grid/GridItem，上一篇博文我们已经学习了固定行列、合并行列和设置滚动，这一篇我们将继续学习Grid的用法，实现翻页滚动、自定义滚动条样式，并实现一个小案例。
到这里就需要用到控制器对象了，核心步骤如下：
- 创建 Scroller 对象（控制器对象）
- 设置给 Grid
- 调用 Scroller 对象的 scrollPage 方法
属于一看就会的代码，于是实现一个翻页滚动效果，当然也可以左右滑动啦：
实现代码如下：
滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll，如果默认的滚动条外观无法满足需求，我们还可以自定义滚动条：
第一步：首先通过 Grid 的 scrollBar 属性关闭滚动条
属性名
类型
说明
scrollBar
BarState
设置滚动条状态。
默认值：BarState.auto
BarState.off 关闭
BarState.on 常驻
BarState.auto 按需显示
第二步：使用ScrollBar组件自定义滚动条
参数名
参数类型
必填
参数描述
scroller
Scroller
是
可滚动组件的控制器。用于与可滚动组件进行绑定。
direction
ScrollBarDirection
否
滚动条的方向，控制可滚动组件对应方向的滚动。
默认值：ScrollBarDirection.Vertical
state
BarState
否
滚动条状态。
默认值：BarState.Auto
样例关键代码如下：
在上面代码的基础上，先来一个看着丑但足够显眼的滚动条：
代码如下：
最后，使用刚刚学习的自定义滚动条来完成滚动导航的滚动条：
嘿！一个丝滑又漂亮的滚动条就出来啦，注意咱们这里主要是做的滚动条，具体图标填充，可以自行使用其他图片测试哦！
代码如下：
好啦好啦，我知道大家可能对于最终的效果展示有点不满意，毕竟不够好看嘛，那就把图片给大家换一下，最终结果如下：
至于这么多图片，是不是要一个一个去下？其实不需要的，直接到以下链接，一个Ctrl+S就全部有了，然后选中前面20个丢进media文件夹里，完事：
最终代码：
好了，今天的分享到这里为止，感谢阅读，欢迎点赞收藏支持鼓励下！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/22996.html