滚动轮播网页特效 滚动网页制作 收藏 0

HarmonyOs开发：轮播图Banner组件封装与使用

轮播图在每个项目中都很常见，鸿蒙中在容器组件中也提供了Swiper组件，用于子组件滑动轮播显示，和前端的使用起来也是异曲同工，我们先看下基本的用法。

以上的代码便轻松的实现了一个轮播图效果，当然了，只是一个简单的案例，很多属性并没有设置，按照正常的使用而言，确实没必要再搞什么封装，但是，有一个潜在的问题是需要封装的，比如使用懒加载数据的时候，不封装的话，每实现一个轮播图就需要重复大量的代码，这显然是冗余的；还有一种场景，那就是，系统的轮播无法满足我们的需求，这种情况下，是不得不进行封装的。

本文的大致内容如下：

1、简单封装之后的代码及效果展示

2、基于Swiper进行懒加载数据和普通数据封装

3、开源地址

4、相关总结

封装的Banner已经上传到了远程仓库，使用起来也是非常的简单

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

效果没什么好说的，都是用Swiper组件所封装的。

代码实现上，毕竟采取了封装，简化了大量的代码，简单的案例如下：

更多的案例，就不贴了，直接去看第3项中的开源地址即可。

相关属性配置

首先Swiper的子组件是支持ForEach和LazyForEach进行渲染数据的，LazyForEach也就是数据懒加载模式，也是官方案例中默认推荐的模式，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用，但是两种渲染数据，在代码逻辑上是完全不同的。

ForEach就比较的简单，数据源是一个数组，在封装上也是非常的简洁：

LazyForEach模式，使用起来相对复杂，组件的创建包括两种情况：LazyForEach首次渲染和LazyForEach非首次渲染，这些都是需要考虑的。

ForEach数据加载，我们只考虑数据源的变化即可，但在LazyForEach中，必须使用DataChangeListener对象来进行更新，需要我们创建新的对象，实现IDataSource，进行数据的增删改查。

对于以上封装之后，在使用上需要注意，也就是更新数据的时候：

声明变量：

赋值变量：

行为操作：

在开源地址中，对各个案例的使用方式，也做了相信的介绍。

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fbanner

目前的轮播图，仅仅对Swiper做了简单的封装，另外增加了一个线条指示器，这远远是不够的，毕竟日常的轮播图形式多种多样，指示器也是千奇百怪，后续也会在此基础之上进行不断的扩展。

图片水中倒影轮播效果，效果太美了，简单易学

时光记忆：图片水中倒影轮播效果。

·开始创作，添加黑底素材，画中画，新增画中画。

·添加一张16比9的图片，缩小图片到合适大小。

·将图片向右平行移出屏幕外，画一开头打关键帧，结尾处将图片向左平行移出屏幕外。

·复制画一拉到画二，将时间线适当扩大一点，前后移动画二位置，找到两张图片中间合适的宽度。

·画二开头位置给画一打一个定位帧，可以先将画二删除，再复制画一拉到画二，画二对齐画一刚才打的定位帧。

·接下来继续复制所复制的每一个轨道，对齐上一个轨道的定位帧位置，需要几张图片就复制几个。

·复制好之后将图片分别替换新图片，做好导出备用。

·做好的图片滚动视频添加进来，向后移动画面。

·第一张图片到屏幕左侧的位置分割，这个位置分割，前面的删除，再向后移动。

·最后一张图片在屏幕右侧的位置，这个位置分割，后面部分删除。

·如果觉得滚动速度太快，选择变速，常规变速，速度调慢。

·选择特效，画面特效，搜索水中倒影透明度，添加第一个，点开调整参数，调整垂直位移，调整到自己满意的画面，大概27就差不多。

·添加广角特效，点开调整参数，数值拉到100，再添加喜欢的贴纸就做好了。

记得关注再走哦。

网站建设时首页的轮播图该如何设置？

　　网站首页轮播图对于网站建设来说是非常重要的一个元素，网站首页轮播图展现在网站顶部，用户打开访问时第一眼就可以看到，尤其对于网站来说极为重要。所以，这也是每个网站设计师掏空心思的地方。

　　1、排版需符合阅读模式

　　通常网站开发用户在预览网站制作设计页面时，对阅读的模式是很挑剔的，普遍是先快速的扫视一遍，只有看到感兴趣的内容才会去仔细阅读。所以文字排版要符合用户阅读模式，只有这样才能留住用户。

　　2、网站首图需贴合主题

　　网站开发制作设计首图的选择一定要贴合网站本身定义和企业形象特点，而不恰当的首图图片会让用户对你的网站失去信任，从而选择关闭网站。所以在挑选网站首图的图片的时候一定要精挑细选，找最适合的图片。

　　3、选择高像素图片

　　在进行网站设计制作时选择高像素首图图片是非常重要的，当然也不仅限于首图，对于网站上所有的图片都很重要，高清的图片让人视觉更加服务，更干净简洁，用户更容易获取信息，所以，拒绝模糊、低像素图片是非常重要的。当然，一些专门经过模糊处理效果的图片除外。

　　4、注重内容

　　轮播图中使用的图片还有文字,是用户进入网站首页或者其他页面一-眼就能看见的东西,比较好是能够直截了当地用简短的文字和简约的设计告诉用户这个网页主要在展示什么信息。但是切忌放太多东西，毕竟用户也不会太在意轮播图,因为在用户的潜意识里,这是广告作用。

　　5、使用主动滚动的轮播图

　　一般的网站都会将轮播图设置 成自动滚动的,就是循环滚动。这样的设置一方面是为了让想要 了解轮播图内容的用户不用动手点击;另一方面也是为了解决用户不会主动点击而网站又想展示的情况。

　　但是,手机网页就不要使用主动滚动的轮播图了, 效果不好。而且,手机屏蒂小，又是直接触屏操作,很容易按到不想点击的内容,这样用户体验自然也差了。

　　6、滚动速度不要太快

　　在网站建设中,选用轮播图展示,那在时间的设计:上面就要恰到好处了,不能太快,因为用户还没看清楚就过去了,也不能太慢,因为用户在这个页面停留的时间也不多,所以差不多就行。

　　7、提示进度暗示器

　　网站的轮播图会是几张以上的,所以页数也应该用一-些特殊的进度符号提示用户,至少要让用户清楚。

　　鸿鑫瑞网络开发提供网站定制开发服务，如您有需要，欢迎随时咨询我们。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com