Comment implémenter les opérations de déverrouillage et de geste dans Uniapp

Comment implémenter les opérations glisser pour déverrouiller et gestes dans Uniapp

Introduction : Avec la popularité des smartphones, les opérations glisser pour déverrouiller et gestes sont devenues l'une des opérations de base permettant aux utilisateurs d'utiliser les téléphones mobiles. Comment implémenter ce type de fonction interactive dans le développement Uniapp ? Cet article expliquera comment implémenter les opérations de déverrouillage des diapositives et de gestes dans Uniapp et fournira des exemples de code spécifiques.

1. Mise en œuvre du déverrouillage coulissant

Le déverrouillage coulissant est une méthode courante de déverrouillage des téléphones mobiles. Les utilisateurs doivent faire glisser leurs doigts sur l'écran pour terminer l'opération de déverrouillage. Dans Uniapp, nous pouvons implémenter le déverrouillage coulissant via des événements tactiles.

1. Créer un composant de curseur

Tout d'abord, nous devons créer un composant de curseur pour représenter la position et l'état du curseur. Dans ce composant, nous pouvons enregistrer la position actuelle du curseur via l'attribut data et définir la position et le style du curseur via l'attribut style.

L'exemple de code est le suivant :

<template>
  <view class="slider" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <view class="slider-bg"></view>
    <view class="slider-handle" :style="sliderStyle"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0, // 滑动开始的X坐标
      sliderX: 0, // 滑块的X坐标
      maxRight: 0, // 滑块最大向右移动的距离
      sliderStyle: "", // 滑块的样式
    };
  },
  mounted() {
    uni.createSelectorQuery().in(this).select(".slider-bg").boundingClientRect((res) => {
      this.maxRight = res.width - 50; // 50为滑块的宽度
    }).exec();
  },
  methods: {
    onTouchStart(event) {
      this.startX = event.touches[0].pageX - this.sliderX;
    },
    onTouchMove(event) {
      let moveX = event.touches[0].pageX - this.startX;
      if (moveX < 0) moveX = 0;
      if (moveX > this.maxRight) moveX = this.maxRight;
      this.sliderX = moveX;
      this.sliderStyle = `transform: translateX(${this.sliderX}px)`;
    },
    onTouchEnd(event) {
      if (this.sliderX === this.maxRight) {
        // 解锁成功
        uni.showToast({
          title: '解锁成功',
          icon: 'success'
        })
      } else {
        // 解锁失败
        uni.showToast({
          title: '解锁失败',
          icon: 'none'
        })
        this.sliderX = 0;
        this.sliderStyle = "";
      }
    },
  },
};
</script>

<style>
.slider {
  width: 300px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

.slider-bg {
  width: 100%;
  height: 100%;
  background: #ccc;
  position: absolute;
  left: 0;
  top: 0;
}

.slider-handle {
  width: 50px;
  height: 50px;
  background: #007AFF;
  position: absolute;
  left: 0;
  top: 0;
}
</style>

2. À l'aide du composant slider

En utilisation réelle, nous pouvons introduire le composant slider dans la page qui nécessite un déverrouillage coulissant et définir le style et la position du curseur selon les besoins.

L'exemple de code est le suivant :

<template>
  <view>
    <slider-component></slider-component>
  </view>
</template>

<script>
import sliderComponent from "@/components/sliderComponent.vue";

export default {
  components: {
    sliderComponent,
  },
};
</script>

2. Mise en œuvre de l'opération gestuelle

L'opération gestuelle fait référence au déclenchement de différentes fonctions via différentes opérations des doigts sur l'écran. Dans Uniapp, nous pouvons implémenter des opérations gestuelles en utilisant le plug-in uni-app-gesture.

1. Installez le plug-in

Tout d'abord, nous devons installer le plug-in uni-app-gesture. Dans HBuilderX, ouvrez le plug-in market (touche de raccourci : Ctrl+Shift+X), recherchez le plug-in uni-app-gesture et installez-le.

2. Présentation des plug-ins

Dans les pages qui nécessitent des opérations gestuelles, vous pouvez introduire le plug-in uplodGestureMixin sous la balise script et utiliser le plug-in dans l'attribut mixins.

L'exemple de code est le suivant :

<template>
  <view>
    <view>{{ gestureType }}</view>
  </view>
</template>

<script>
import uplodGestureMixin from "@/mixins/uplodGestureMixin";

export default {
  mixins: [uplodGestureMixin],
  data() {
    return {
      gestureType: "", // 手势类型
    };
  },
  methods: {
    gestureChange(e) {
      this.gestureType = e.gestureType;
    },
  },
};
</script>

3. Gestion des opérations gestuelles

Dans le fichier mixin, nous pouvons gérer les opérations gestuelles en liant l'événement gesteChange au composant uniapp-gesture.

L'exemple de code est le suivant :

import { uplodGesture } from "uni-app-gesture";
export default {
  components: {
    uplodGesture
  },
};

4. Analyse de la valeur de retour de l'événement

La valeur de retour de l'événement de geste est un objet, comprenant des informations telles que le type de geste (gestureType) et la direction du geste (gestureDirection ).

• gestureType : le type de geste, qui peut être glisser (glisser), appuyer (cliquer), double-appuyer (double-clic), appuyer longuement (appuyer longuement), pincer (pincer) et faire pivoter (faire pivoter).
• gestureDirection : les événements glissants contiennent ce champ, indiquant la direction du glissement. Les autres types d'événements gestuels ne contiennent pas ce champ.

Résumé : Cet article présente comment implémenter les opérations de glissement pour déverrouiller et gestuelles dans Uniapp, et fournit des exemples de code spécifiques. Les développeurs peuvent utiliser les codes correspondants pour implémenter les fonctions de déverrouillage par diapositive et d'opération gestuelle en fonction de leurs propres besoins. J'espère que cela aidera au développement d'Uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!