HarmonyOS鸿蒙Next APP开发-swiper多场景练习

HarmonyOS鸿蒙Next APP开发-swiper多场景练习

一、技术相关

语言: Js；组件：swiper 工具：deveco studio 多种用途凡是尝试

效果如下

图片2.png

图片1.png

二、部分代码如下图

HML

图片3.png

CSS

图片4.png

JS

图片5.png

三、问题讨论：在跳转页面的时候，用select选择时，不能用点击绑定事件，那需要用什么事件绑定swipeTo？

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/swiper%E4%BD%93%E9%AA%8C


更多关于HarmonyOS鸿蒙Next APP开发-swiper多场景练习的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

楼主是不是整重了，这篇文章好像在论坛见过啊

更多关于HarmonyOS鸿蒙Next APP开发-swiper多场景练习的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个组件以前我们有体验过。体验的具体方式不一样。

请问swiper能用for吗？我想动态为swiper增加子组件，但是貌似好像不可以，有没有什么办法

大佬有试过在index.json中配置actions时，传入swiper的index属性，跳转到Ability的时候，可以传递对应的Index信息的不？ 我用{{$idx}} 也没法获取index

边看老师的文章，边联系，多实操，进步很大

支持大佬，对我很有收获，期待你更多好的作品

在HarmonyOS鸿蒙Next中进行Swiper多场景开发，首先需熟悉Swiper组件的基本用法。通过Swiper可以实现轮播图、图片浏览等功能。在config.json中配置页面路由，使用Swiper组件时，可通过indicator属性显示指示器，autoplay属性实现自动播放。多场景练习可包括：

  1. 图片轮播
  2. 商品展示
  3. 新闻滑动浏览

每个场景中，结合Swiper与Image、Text等组件，实现丰富交互体验。

回到顶部