So implementieren Sie die Scrollfunktion für Links- und Rechtsklick in Uniapp-uni-app-php.cn

So implementieren Sie die Scrollfunktion für Links- und Rechtsklick in Uniapp

PHPz

Freigeben： 2023-04-18 14:24:54

Original

3261 Leute haben es durchsucht

uniapp ist ein plattformübergreifendes Anwendungsframework auf Basis von Vue.js, das gleichzeitig Anwendungen für mehrere Plattformen wie iOS, Android, H5 und Miniprogramme entwickeln kann. Unter diesen ist der Bildlaufvorgang ein sehr häufiger Vorgang in Uniapp. Heute werden wir besprechen, wie man den Bildlauf mit der linken und rechten Maustaste in Uniapp implementiert.

1. Hintergrundeinführung

In der tatsächlichen Anwendung von Uniapp müssen wir häufig Links- und Rechtslaufvorgänge auf der Seite implementieren. Beispielsweise erfordern mobile Navigationsmenüs oder das horizontale Bildscrollen einen Links- und Rechtsklick zum Scrollen. Wie erreicht man also diesen Links- und Rechtsklick-Scrolleffekt in Uniapp? Als nächstes werden wir detaillierte Schritte verwenden, um diese Frage zu beantworten.

2. Implementierungsschritte

1 Erstellen Sie ein Uniapp-Projekt in HBuilderX, öffnen Sie „pages/index/index.vue“ und fügen Sie den folgenden Code hinzu:

<template>
  <view class="container">
    <view class="scroll-view">
      <view class="scroll-item">1</view>
      <view class="scroll-item">2</view>
      <view class="scroll-item">3</view>
      <view class="scroll-item">4</view>
      <view class="scroll-item">5</view>
      <<view class="scroll-item">6</view>
    </view>
  </view>
</template>

<style>
.container{
  height:300px;
  overflow:hidden;
}
.scroll-view{
  display:flex;
  width:max-content;
  height:100%;
  transition:transform 0.5s ease;
}
.scroll-item{
  width:100px;
  height:300px;
  background-color:#eee;
  margin-right:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:30px;
}
</style>

Nach dem Login kopieren

# 🎜 🎜#2. Im Stil verwenden wir Flex-Layout und stellen die Breite auf max-content ein, damit die Inhaltsbreite angepasst werden kann. Gleichzeitig verwenden wir overflow:hidden im Containerstil, wodurch die Höhe des Containers begrenzt und der Inhalt außerhalb des Containers ausgeblendet wird.

3. Um den Scrolleffekt nach links und rechts zu erzielen, müssen wir das Übergangsattribut verwenden und den Wert des Transformationsattributs ändern, um den Scrolleffekt zu erzielen. Hier ändern wir den Transformationswert der Bildlaufansicht, indem wir auf die Schaltfläche klicken, um den Effekt des Scrollens mit Links- und Rechtsklick zu erzielen.

4. Um den Effekt des Klickens auf die Schaltfläche zu erzielen, müssen wir einen aktuellen Wert in den Daten definieren, der die aktuelle Position darstellt, und dann die Transformation der Bildlaufansicht dynamisch ändern, indem wir den Wert ändern der aktuellen Position im Methodenwert.

<script>
export default {
  data(){
    return{
      current:0
    }
  },
  methods:{
    slideLeft(){
      if(this.current > 0){
        this.current = this.current - 1;
      }
    },
    slideRight(){
      if(this.current < 5){
        this.current = this.current + 1;
      }
    }
  },
  watch:{
    current:function(){
      this.$nextTick(()=>{
        this.$refs.scrollView.style.transform = "translateX(" + (-110 * this.current) + "px)";
      });
    }
  }
}
</script>

Nach dem Login kopieren

Hier verwenden wir das Watch-Attribut, um Änderungen im Strom zu überwachen, und verwenden dann die Methode $nextTick, um sicherzustellen, dass das DOM-Element gerendert wurde, bevor bestimmte Vorgänge ausgeführt werden. In der Methode definieren wir zwei Methoden, slideLeft und slideRight, um den Effekt des Schiebens nach links und rechts zu erzielen. Bei der Implementierung des Sliding-Effekts verwenden wir TranslateX, um die Position der Scroll-Ansicht zu steuern.

5. Schließlich müssen wir der Seite linke und rechte Schiebeschaltflächen hinzufügen, damit Benutzer klicken können, um den Schiebeeffekt zu erzielen. Wir fügen der Seite den folgenden Code hinzu:

<view class="control-panel">
  <button @click="slideLeft">left</button>
  <button @click="slideRight">right</button>
</view>

Nach dem Login kopieren

Hier verwenden wir @click, um das Klickereignis der Schaltfläche zu binden, und rufen die Methoden slideLeft und slideRight in der Methode auf, um den Effekt von left und zu erzielen Rechtsklick und schieben.

3. Zusammenfassung

Durch die oben genannten Schritte können wir den Effekt von Links- und Rechtsklick und Schieben in Uniapp erzielen. Im praktischen Einsatz können wir die Gleitwirkung auch bedarfsgerecht optimieren und erweitern. Hier ist nur ein einfaches Beispiel, ich hoffe, es wird Anfängern hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Scrollfunktion für Links- und Rechtsklick in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!