现象描述
在某些场景下，需要swiper在用户不触摸的情况下，可以自动切换，但当用户触摸滑动swiper时，需要改为由用户手动控制切换，而在用户取消触摸后，重新恢复自动切换。
实现方法
可以借助通用事件swipe识别手势的上下左右滑动，当识别到左右滑动时，切换为手动控制；当识别到上下滑动时或者没有滑动操作时，则继续保持自动切换。但是在实际使用时，在swiper组件上应用swipe事件时，对左右滑动的识别不太灵敏，偶尔会发生没有识别到的情况。所以如果需要精准识别手势的上下左右滑动，可以考虑用block组件在swiper组件之上堆叠一个div组件，在div组件上面添加swipe事件即可。
实现代码：
<template>
<div class="container">
<block>
<div class="swiper" "swipe">
<swiper class="swiper" vertical="{{vertical}}" id="swiper" autoplay="{{autoPlay}}" interval="2000" indicator="{{indicator}}" loop="{{isLoop}}" "change" duration="{{sliderValueForDuration}}" style="height:{{heightSwiper}};indicator-size:{{iSize}}">
<text class="item color-1">A</text>
<text class="item color-2">B</text>
<text class="item color-3">C</text>
<text class="item color-4">D</text>
<text class="item color-5">E</text>
<text class="item color-6">F</text>
</swiper>
<div class="swipercover">
<text>swiper之上添加透明遮罩，以识别滑动事件</text>
</div>
</div>
</block>
</div>
</template>
<style>
@import "../Common/css/common.css";
.item-container {
margin-bottom: 50px;
margin-right: 60px;
margin-left: 60px;
flex-direction: column;
}
.swiper {
flex-direction: column;
indicator-color: #800080;
indicator-selected-color: #000000;
height: 250px;
position: fixed;
}
.swipercover {
flex-direction: column;
height: 250px;
background-color: transparent;
position: fixed;
border-style: solid;
}
.item {
height: 250px;
text-align: center;
color: #ffffff;
}
.color-1 {
background-color: #09ba07;
}
.color-2 {
background-color: #f76160;
}
.color-3 {
background-color: #0faeff;
}
.color-4 {
background-color: #9acd32;
}
.color-5 {
background-color: #000000;
}
.color-6 {
background-color: #8a2be2;
}
</style>
<script>
import prompt from "@system.prompt";
export default {
data: {
heightSwiper: "250px",
componentName: "swiper",
autoPlay: true,
indicator: true,
sliderValue: 1500,
sliderValueForDuration: 500,
isLoop: true,
vertical: false,
iSize: "20px",
index: 0
},
onInit() {
this.$page.setTitleBar({ text: "swiper" });
},
change: function (e) {
this.index = e.index;
},
swipe: function (e) {
console.info("e.direction==" + e.direction);
if (e.direction === "left") {
prompt.showToast({
message: "切换为手动控制"
});
if (this.index === 5) {
this.$element("swiper").swipeTo({ index: 0 });
} else {
this.$element("swiper").swipeTo({ index: this.index + 1 });
}
this.autoPlay = false;
setTimeout(() => {
this.autoPlay = true;
prompt.showToast({
message: "切换为自动控制"
});
}, 4000);
}
if (e.direction === "right") {
prompt.showToast({
message: "切换为手动控制"
});
if (this.index === 0) {
this.$element("swiper").swipeTo({ index: 5 });
} else {
this.$element("swiper").swipeTo({ index: this.index - 1 });
}
this.autoPlay = false;
setTimeout(() => {
this.autoPlay = true;
prompt.showToast({
message: "切换为自动控制"
});
}, 4000);
}
}
};
</script>欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
{{o.name}}
{{m.name}}