harmony 鸿蒙swiper

  • 2023-06-24
  • 浏览 (465)

swiper

The <swiper> component provides a container that allows users to switch among child components using swipe gestures.

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

All child components except <list> are supported.

Attributes

Name Type Default Value Mandatory Description
index number 0 No Index of the child component currently displayed in the container.
loop boolean true No Whether to enable looping.
duration number - No Duration of the autoplay for child component switching.
vertical boolean false No Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.
The value cannot be dynamically updated.
id string - No Unique ID of the component.
style string - No Style declaration of the component.
class string - No Style class of the component, which is used to refer to a style table.
ref string - No Reference information of child elements, which is registered with the parent component on $refs.

Events

Name Parameter Description
change { index: currentIndex } Triggered when the index of the currently displayed component changes.
click - Triggered when the component is clicked.
longpress - Triggered when the component is long pressed.
swipe5+ SwipeEvent Triggered when a user quickly swipes on the component.

Styles

Name Type Default Value Mandatory Description
width &lt;length&gt; |&lt;percentage&gt;5+ - No Component width.
If this attribute is not set, the default value 0 is used.
height &lt;length&gt; |&lt;percentage&gt;5+ - No Component height.
If this attribute is not set, the default value 0 is used.
padding &lt;length&gt; 0 No Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
padding-[left|top|right|bottom] &lt;length&gt; 0 No Left, top, right, and bottom padding.
margin &lt;length&gt; |&lt;percentage&gt;5+ 0 No Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.
- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).
margin-[left|top|right|bottom] &lt;length&gt; |&lt;percentage&gt;5+ 0 No Left, top, right, and bottom margins.
border-width &lt;length&gt; 0 No Shorthand attribute to set the margin for all sides.
border-color &lt;color&gt; black No Shorthand attribute to set the color for all borders.
border-radius &lt;length&gt; - No Radius of round-corner borders.
background-color &lt;color&gt; - No Background color.
opacity5+ number 1 No Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
display string flex No How and whether to display the box containing an element. Available values are as follows:
- flex: flexible layout
- none: not rendered
[left|top] &lt;length&gt; |&lt;percentage&gt;6+ - No Edge of the element.
- left: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.
- top: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.

Example

<!-- xxx.hml -->
<swiper class="container" index="{{index}}">
  <div class="swiper-item primary-item">
    <text>1</text>
  </div>
  <div class="swiper-item warning-item">
    <text>2</text>
  </div>
  <div class="swiper-item success-item">
    <text>3</text>
  </div>
</swiper>
/* xxx.css */
.container {
  left: 0px;
  top: 0px;
  width: 454px;
  height: 454px;
}
.swiper-item {
  width: 454px;
  height: 454px;
  justify-content: center;
  align-items: center;
}
.primary-item {
  background-color: #007dff;
}
.warning-item {
  background-color: #ff7500;
}
.success-item {
  background-color: #41ba41;
}
/* xxx.js */
export default {
  data: {
    index: 1
  }
}

swiper

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)

harmony 鸿蒙Universal Attributes

harmony 鸿蒙Universal Events

harmony 鸿蒙Universal Styles

harmony 鸿蒙chart

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙marquee

harmony 鸿蒙picker-view

0  赞