【鸿蒙实战开发】swiper开发指南

于 2024-08-13 21:52:50 发布
阅读量789 收藏 25
点赞数 9
分类专栏： 鸿蒙 安卓 前端 文章标签： harmonyos 华为 鸿蒙 ArkUI 前端 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141174780
版权
鸿蒙 同时被 3 个专栏收录
201 篇文章 3 订阅
订阅专栏
安卓
201 篇文章 0 订阅
订阅专栏
前端
201 篇文章 0 订阅
订阅专栏

swiper为滑动容器，提供切换显示子组件的能力。具体用法请参考swiper。

创建swiper组件

在pages/index目录下的hml文件中创建一个swiper组件。

<!-- xxx.hml-->
<div class="container">
  <swiper>
    <div class="item" style="background-color: #bf45ea;">
      <text>item1</text>
    </div>
    <div class="item" style="background-color: #088684;">
      <text>item2</text>
    </div>
    <div class="item" style="background-color: #7786ee;">
      <text>item3</text>
    </div>
  </swiper>
</div>

/* xxx.css */
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
  align-items: center;
  justify-content: center;
  width: 100%;
}
swiper{
  height: 30%;
}
.item{
  width: 100%;
  height: 500px;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 50px;
  color: white;
}

0000000000011111111.20240813092132.52701934960440510880465421815122.gif

说明

swiper组件支持除之外的子组件。

添加属性

swiper组件当不开启循环播放（loop=“false”）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点，设置切换时为渐隐滑动效果（scrolleffect=“fade”））。


<!-- xxx.hml-->
<div class="container">
  <swiper index="1"  autoplay="true" interval="2000" indicator="true" digital="true" duration="500"
  scrolleffect="fade" loop="false">
    <div class="item" style="background-color: #bf45ea;">
      <text>item1</text>
    </div>
    <div class="item" style="background-color: #088684;">
      <text>item2</text>
    </div>
    <div class="item" style="background-color: #7786ee;">
      <text>item3</text>
    </div>
    <div class="item" style="background-color: #c88cee;">
      <text>item4</text>
    </div>
  </swiper>
</div>

/* xxx.css */
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
  align-items: center;
  justify-content: center;
}
swiper{
  height: 30%;
}
.item{
  width: 100%;
  height: 500px;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 50px;
  color: white;
}

0000000000011111111.20240813092132.06653957896148874246690019131405.gif

说明

  • 设置indicator（是否启用导航点指示器）属性为true时digital（是否启用数字导航点）属性才会生效。

  • swiper子组件的个数大于等于2时设置的loop属性才会生效。

  • scrolleffect属性仅在loop属性值为false时生效。

设置样式

设置swiper组件的宽高，导航点指示器的直径大小（indicator-size）、颜色（indicator-color）、相对位置（indicator-top）及选中时的颜色（indicator-selected-color）。

<!-- xxx.hml-->
<div class="container">
    <swiper index="1" autoplay="true" interval="2000"  duration="500" >
        <div class="item" style="background-color: bisque;">
            <text>item1</text>
        </div>
        <div class="item" style="background-color: darkkhaki;">
            <text>item2</text>
        </div>
        <div class="item" style="background-color: cadetblue;">
            <text>item3</text>
        </div>
    </swiper>
</div>

/* xxx.css */
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
  align-items: center;
  justify-content: center;
}
swiper{
  width:  500px;
  height: 500px;
  border-radius: 250px;
  indicator-color: white;
  indicator-selected-color: blue;
  indicator-size: 40px;
  indicator-top: 100px;
  overflow: hidden ;
}
.item{
  width: 100%;
  height: 500px;
}
text{
  width: 100%;
  text-align: center;
  margin-top: 150px;
  font-size: 50px;
  color: white;
}

0000000000011111111.20240813092132.95637711162328381926776460478497.gif

绑定事件

创建两个text组件添加点击事件，当点击后就调用showPrevious（显示上一个子组件）或showNext（显示下一个子组件）方法。添加select组件下拉选择时触发change事件后调用swipeTo方法跳转到指定轮播页面。swiper组件绑定change（当前显示的组件索引变化时触发）和finish（切换动画结束时触发）事件。

<!-- xxx.hml-->
<div class="container">
  <swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper">
    <div class="item" style="background-color: #bf45ea">
      <text>item1</text>
    </div>
    <div class="item" style="background-color: #088684;">
      <text>item2</text>
    </div>
    <div class="item" style="background-color: #7786ee;">
      <text>item3</text>
    </div>
    <div class="item" style="background-color: #c88cee;">
      <text>item4</text>
    </div>
  </swiper>
  <div class="content">
      <button class="pnbtn" onclick="previous">Previous</button>
      <select onchange="selectChange">
          <option value="0">swipeTo 1</option>
          <option value="1">swipeTo 2</option>
          <option value="2">swipeTo 3</option>
          <option value="3">swipeTo 4</option>
      </select>
    <button class="pnbtn" onclick="next">Next</button>
  </div>
</div>

/* xxx.css */
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
  align-items: center;
  justify-content: center;
}
swiper{
  height: 30%;
}
.item{
  width: 100%;
  height: 500px;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 50px;
  color: white;
}
select{
  background-color: white;
  width: 250px;
  height: 80px;
}
.content{
  margin-top: 100px;
  justify-content: space-around;
}
.pnbtn{
  width: 200px;
  height: 80px;
  font-size: 30px; 
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default{
  change(e){
    promptAction.showToast({duration:2000,message:"current index:"+e.index});
  },
  finish(){
    promptAction.showToast({duration:2000,message:"切换动作结束"});
  },
  selectChange(e){
    this.$element('swiper').swipeTo({index: Number(e.newValue)});
  },
  previous(){
    this.$element('swiper').showPrevious();
  },
  next(){
    this.$element('swiper').showNext();
  }
}

0000000000011111111.20240813092132.77084289248627750898650379629394.gif

场景示例

本场景中使用swiper创建一个轮播图，在轮播图底部制作一个缩略图，点击缩略图后调用swipeTo方法切换到对应的轮播图。

<!-- xxx.hml-->
<div class="container">
  <swiper duration="500" indicator="false" id="swiper" onchange="change">
    <div class="item" for="item in list">
      <image src="{{item.src}}"></image>
    </div>
  </swiper>
  <div class="content">
    <div class="content_item {{index == $idx?'actived':''}}" for="item in list" onclick="imageTo({{$idx}})">
      <image src="{{item.src}}"></image>
    </div>
  </div>
</div>

/* xxx.css */
.container{
  flex-direction: column;
  background-color: #F1F3F5;
  align-items: center;
  justify-content: center;
  width: 100%;
}
swiper{
  width: 100%;
  height: 500px;
}
.item{
  width: 100%;
  height: 500px;
}
.content{
  margin-top: -120px;
  width: 70%;
  display: flex;
  justify-content: space-around;
  height: 100px;
}
.content_item{
  padding: 5px;
  transform: scale(0.5);
}
.actived{
  transform: scale(1);
  border: 1px solid #b20937ea;
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  data:{
    index: 0,
    list:[
      {src: 'common/images/1.png'},
      {src: 'common/images/2.png'},
      {src: 'common/images/3.png'},
      {src: 'common/images/4.png'},]
    },
  imageTo(index){
    this.index = index;
    this.$element('swiper').swipeTo({index: index});
  },
  change(e){
    this.index = e.index;
  }
}

0000000000011111111.20240813092132.74266391780175908135384431067238.gif

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (HarmonyOS)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

在这里插入图片描述

代码改变世界996
关注
专栏目录
HarmonyOS鸿蒙开发指南:容器组件 swiper开发指导
sybh的博客
01-09 1097
Swiper组件当不开启循环播放（loop="false"）时添加自动播放属性（autoplay），设置自动播放时播放时间间隔（interval），页面会自动切换并停留在最后一个子组件页面。设置Swiper组件的宽高，导航点指示器的直径大小（indicator-size）、颜色（indicator-color）、相对位置（ndicator-top）及选中时的颜色（indicator-selected-color）。Swiper子组件的个数大于等于2时设置的loop属性才会生效。
2024鸿蒙OS实战开发项目大全：从入门到精通（含101个实战案例）超详细的鸿蒙实战案例
sybh的博客
05-17 3625
从基础的UI组件到复杂的分布式场景，从ArkTS的细致教学到JS的灵活运用，这一百个项目涵盖了你需要知道的HarmonyOS实战技术和策略。我们会从溪村小镇的细节世界开始，深入多端部署的可能性，感受如购物应用和音乐专辑这样的实用系统是如何在HarmonyOS中获得生命的。忘却繁杂，把握简单，最后我们将以开发您的第一个快应用（初级版和高级版）为终结，为您的鸿蒙OS开发之旅画上完美的句号。这一百个项目不仅仅是教程或示例，它们是设计思维、创新灵感和开发技巧的集大成，是您实战开发HarmonyOS路上的重要伴侣。
OpenHarmony实战开发-Swiper高性能开发指导。
2401_82546228的博客
04-21 956
在应用开发中，Swiper 组件常用于翻页场景，比如：桌面、图库等应用。Swiper 组件滑动切换页面时，基于按需加载原则通常会在下一个页面将要显示时才对该页面进行加载和布局绘制，这个过程包括：
【愚公系列】2023年12月 HarmonyOS教学课程 013-ArkUI组件（Swiper）
热门推荐
时光隧道
12-04 6万+
Swiper可以实现手机、平板等移动端设备上的图片轮播效果，支持无缝轮播、自动播放、响应式布局等功能。Swiper轮播图具有使用简单、样式可定制、功能丰富、兼容性好等优点，是很多网站和移动应用中常用的轮播图插件。
鸿蒙HarmonyOS开发中的知识：Swiper组件
DMZDAMS的博客
06-21 839
兼容性测试包括：acts、acts-validator、hats、dcts、ssts
HarmonyOS Next开发学习手册——容器组件(swiper开发）
最新发布
maniuT的博客
07-16 383
swiper为滑动容器，提供切换显示子组件的能力。
OpenHarmony开发实战—SystemUI编译过程笔记
m0_70749039的博客
06-20 704
系统必须为Ubuntu18.04或Ubuntu20.04
鸿蒙（HarmonyOS）性能优化实战-Swiper高性能开发
maniuT的博客
04-23 1551
Swiper 组件的预加载机制与 LazyForEach 结合使用，能够达到最佳优化效果。预加载的 cachedCount 并非越大越好，需要结合单个子组件加载耗时来设置。假设一个子组件的加载耗时为 Nms，那么 cachedCount 推荐设置为小于 400/N。如果应用有非常高的性能优化需求，Swiper 预加载机制可搭配 OnAnimationStart 接口回调使用，进一步提升预加载的效率。码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些。
HarmonyOS实战开发-如何打造购物商城APP。
2401_82546228的博客
04-26 4310
今天给大家分享一个非常好的实战项目，购物商城，购物商城是一个集购物、娱乐、服务于一体的综合性平台，致力于为消费者提供一站式的购物体验。各种功能都有涉及，最适合实现学习。
鸿蒙HarmonyOS实战-ArkUI组件（Swiper）_鸿蒙 swiper，2024年最新高级鸿蒙开发技术
tencentes的博客
04-14 392
当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。通过indicatorStyle属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。为false时，表示在水平方向上进行轮播。
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
在“HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试”中，我们可以学习到关于HarmonyOS应用开发的关键知识点。这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。...
HarmonyOS NEXT 自定义Swiper卡片预览效果实现
shudaoshanQAQ的博客
03-27 1260
本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动效果。
鸿蒙ArkTS容器组件：【Swiper】
2401_82772199的博客
07-14 792
滑块视图容器，提供子组件滑动轮播显示的能力。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
HarmonyOS Next开发学习手册——创建轮播 (Swiper)
maniuT的博客
06-29 1091
Swiper支持通过 customContentTransition 设置自定义切换动画，可以在回调中对视窗内所有页面逐帧设置透明度、缩放比例、位移、渲染层级等属性实现自定义切换动画。@Entry@Componenti++) {build() {Column() {Swiper() {})// 同组页面完全滑出视窗外时，重置属性值} else {// 同组页面未滑出视窗外时，对同组中左右两个页面，逐帧根据position修改属性值} else {})
鸿蒙开发实战项目(二十七):Swiper的使用（ArkTS）
sybh的博客
01-27 1266
本篇Codelab主要介绍了滑动容器组件Swiper的几种常见的应用场景，包括顶部导航、轮播图以及视频滑动播放。
鸿蒙HarmonyOS实战-ArkUI组件（Swiper）
shudaoshanQAQ的博客
01-05 3596
Swiper可以实现手机、平板等移动端设备上的图片轮播效果，支持无缝轮播、自动播放、响应式布局等功能。Swiper轮播图具有使用简单、样式可定制、功能丰富、兼容性好等优点，是很多网站和移动应用中常用的轮播图插件。
HarmonyOS开发探索：基于Swiper的页面布局
DMZDAMS的博客
07-01 1060
Swiper页面支持自定义动画
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Swiper容器组件
adendean的博客
01-27 1478
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Swiper容器组件。
Angular6集成Swiper滑动插件实战指南
本文将介绍如何在Angular 6项目中集成和使用Swiper库，一个流行的滑动轮播组件。 在Angular 6项目中使用Swiper，首先需要通过npm或yarn进行安装。以下是安装步骤： 1. 安装Swiper： 使用npm： ``` npm install ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值