【快应用】快应用中控制swiper自动和手动滑动的切换

​现象描述

在某些场景下，需要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