swiper
The <swiper> component provides a container that allows users to switch among child components by swiping operations.
Required Permissions
None
Child Components
All child components except <list> are supported.
Attributes
In addition to the attributes in Universal Attributes, the following attributes are supported.
Name | Type | Default Value | Mandatory | Description |
---|---|---|---|---|
index | number | 0 | No | Index of a child component currently displayed in the container. |
autoplay | boolean | false | No | Whether to enable autoplay for child component switching. If this attribute is true, the indicator does not take effect5+. |
interval | number | 3000 | No | Autoplay interval, in milliseconds, when autoplay is enabled. |
indicator | boolean | true | No | Whether to enable the indicator. The default value is true. |
digital5+ | boolean | false | No | Whether to enable the digital indicator. The default value is false. NOTE: The digital indicator takes effect only when indicator is set to true. |
indicatordisabled5+ | boolean | false | No | Whether gesture operations are disabled on the indicator. If this attribute is set to true, the indicator does not respond to clicking or dragging operations. |
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. |
cachedsize7+ | number | -1 | No | Minimum number of cached items during delayed loading of the <swiper> component. The value -1 indicates that all content is cached. |
scrolleffect7+ | string | spring | No | Scroll effect. The options are as follows: - spring: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. - fade: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance. - none: No effect after the scroll bar is moved to the edge.NOTE:This attribute is valid only when loop is set to false. |
Styles
In addition to the styles in Universal Styles, the following styles are supported.
Name | Type | Default Value | Mandatory | Description |
---|---|---|---|---|
indicator-color | <color> | - | No | Fill color of the navigation point indicator. |
indicator-selected-color | <color> | #ff007dff | No | Color of the currently selected navigation point indicator. |
indicator-size | <length> | 4px | No | Diameter of the navigation point indicator. |
indicator-top|left|right|bottom | <length> | <percentage> | - | No | Relative position of the indicator in the swiper. |
next-margin7+ | <length> | <percentage> | - | No | Next margin, used to reveal a small part of the next item. |
previous-margin7+ | <length> | <percentage> | - | No | Previous margin, used to reveal a small part of the previous item. |
Events
In addition to the events in Universal Events, the following events are supported.
Name | Parameter | Description |
---|---|---|
change | { index: currentIndex } | Triggered when the index of the currently displayed component changes. |
rotation | { value: rotationValue } | Triggered when the crown of the wearable rotates. |
animationfinish7+ | - | Triggered when the animation is finished. |
Methods
In addition to the methods in Universal Methods, the following events are supported.
Name | Parameter | Description |
---|---|---|
swipeTo | { index: number(specified position) } | Scrolls the child component to the position at the specified index. |
showNext | None | Shows the next child component. |
showPrevious | None | Shows the previous child component. |
Example
<!-- 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%;
justify-content: center;
background-color: #007dff;
}
.swiperContent2{
height: 100%;
justify-content: center;
background-color: #ff7500;
}
.swiperContent3{
height: 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();
}
}