HarmonyOS鸿蒙Next中快应用控制swiper自动和手动滑动的切换

HarmonyOS鸿蒙Next中快应用控制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">
          swiper之上添加透明遮罩，以识别滑动事件
        </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>