swiper
滑动容器,提供切换子组件显示的能力。
权限列表
无
子组件
支持除<list>之外的子组件。
属性
除支持通用属性外,还支持如下属性:
|
样式
除支持通用样式外,还支持如下样式:
事件
除支持通用事件外,还支持如下事件:
方法
除支持通用方法外,还支持如下方法:
示例
<!-- xxx.hml -->
<div class="container">
<swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false">
<div class = "swiperContent" >
<text class = "text">First screen</text>
</div>
<div class = "swiperContent">
<text class = "text">Second screen</text>
</div>
<div class = "swiperContent">
<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;
}
.swiperContent {
height: 100%;
justify-content: center;
}
.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();
}
}