滑动容器，提供切换子组件显示的能力。

权限列表

无

子组件

可以包含子组件。

属性

除支持[通用属性]外，还支持如下属性：

名称 类型 默认值 必填 描述
index number 0 否 当前在容器中显示的子组件的索引值。
autoplay boolean false 否 子组件是否自动播放，自动播放状态下，导航点不可操作5+。
interval number 3000 否 使用自动播放时播放的时间间隔，单位为ms。
indicator boolean true 否 是否启用导航点指示器，默认true。
digital5+ boolean false 否 是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。
indicatordisabled5+ boolean false 否 指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。
loop boolean true 否 是否开启循环滑动。
duration number - 否 子组件切换的动画时长。
vertical boolean false 否 是否为纵向滑动，纵向滑动时采用纵向的指示器。
cachedsize7+ number -1 否 swiper延迟加载时item最少缓存数量。-1表示全部缓存。
scrolleffect7+ string spring 否 滑动效果。目前支持如下：- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化- none：滑动到边缘后无效果。该属性仅在loop属性为false时生效。

样式

除支持[通用样式]外，还支持如下样式：

名称 类型 默认值 必填 描述
indicator-color - 否 导航点指示器的填充颜色。
indicator-selected-color #ff007dff 否 导航点指示器选中的颜色。
indicator-size 4px 否 导航点指示器的直径大小。
indicator-top left right bottom
next-margin7+ - 否
previous-margin7+ - 否

事件

除支持[通用事件]外，还支持如下事件：

名称 参数 描述
change { index: currentIndex } 当前显示的组件索引变化时触发该事件。
rotation { value: rotationValue } 智能穿戴表冠旋转事件触发时的回调。
animationfinish7+ - 动画结束时触发该事件。

方法

除支持[通用方法]外，还支持如下方法：

名称 参数 描述
swipeTo { index: number(指定位置) } 切换到index位置的子组件。
showNext 无 显示下一个子组件。
showPrevious 无 显示上一个子组件。

示例

<!-- xxx.hml -->
<div class="container">
  <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1"
    scrolleffect="spring">
    <div class = "swiperContent1" >
      <text class = "text">First screen</text>
    </div>
    <div class = "swiperContent2">
      <text class = "text">Second screen</text>
    </div>
    <div class = "swiperContent3">
      <text class = "text">Third screen</text>
    </div>
  </swiper>
  <input class="button" type="button" value="swipeTo" onclick="swipeTo"></input>
  <input class="button" type="button" value="showNext" onclick="showNext"></input>
  <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
}
.swiper {
  flex-direction: column;
  align-content: center;
  align-items: center;
  width: 70%;
  height: 130px;
  border: 1px solid #000000;
  indicator-color: #cf2411;
  indicator-size: 14px;
  indicator-bottom: 20px;
  indicator-right: 30px;
  margin-top: 100px;
  next-margin:20px;
  previous-margin:20px;
}
.swiperContent1{
  height: 100%;
  width: 100%;
  justify-content: center;
  background-color: #007dff;
}
.swiperContent2{
  height: 100%;
  width: 100%;
  justify-content: center;
  background-color: #ff7500;
}
.swiperContent3{
  height: 100%;
  width: 100%;
  justify-content: center;
  background-color: #41ba41;
}
.button {
  width: 70%;
  margin: 10px;
}
.text {
  font-size: 40px;
}

// xxx.js
export default {
  swipeTo() {
    this.$element('swiper').swipeTo({index: 2});
  },
  showNext() {
    this.$element('swiper').showNext();
  },
  showPrevious() {
    this.$element('swiper').showPrevious();
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

# javascript # 鸿蒙 # harmonyos # 鸿蒙系统 # ui
Logo
欢迎加入Laval社区

社区规范：仅讨论OpenHarmony相关问题。

更多推荐

来电流程分析

  1.来电触发 当系统检测到来电事件时，进入来电处理流程。系统首先会对设备状态进行一系列校验，决定是否正常响铃或静默拒接。 来电时，整体流程图   2.状态校验 开机向导（OOBE）中维护两个关键字段，用于标识设备的初始化状态：   字段名含义存储位置device_provisioned设备是否已完成激活SETTINGSDATA 表user_setup_comple

avatar Laval社区

如何使用正确的网络连接

前言 在用户平时使用手机 wifi 网络下载过程中；此时用户有连接 wifi 热点， 但该 wifi 热点无法连接网络，从而会使用用户流量进行下载；本文会介绍应该要怎样避免使用用户流量下载。   描述 1、首先通过使用 connection.getAllNets() 获取所有网络，遍历所有NetHandle网络 2、严格校验其是否具备 NET_CAPABILITY_INTERN

avatar Laval社区

OpenHarmony 大屏多屏互动专题：DLNA / Miracast / Cast+ 三大投屏能力全解析

       在教室教学、会议室协作、家庭娱乐场景里，投屏稳定、延迟低、操控跟手，直接决定使用体验。OpenHarmony 大屏针对不同场景，提供三套成熟投屏方案：DLNA、Miracast、Cast+，覆盖影音投屏、桌面投屏、低时延协同全场景，让多屏互动更稳、更快、更好用。 一、DLNA：影音专用投屏，简单通用       &

avatar Laval社区