Vue implementiert Beispielcode für Links- und Rechtsgleiteffekte

<Vorlage>
    <div id="Schiebeleiste" class="box">
        <div class="item" ref="Folie" :style="Folienstil" @touchstart="start($event)" @touchmove="bewegen($event)" @touchend="ende($event)">
          <img src="http://img2.imgtn.bdimg.com/it/u=2555191195,2735808065&fm=26&gp=0.jpg" alt="">
          <div Klasse="rechts">
            <div class="title">Hallo!</div>
            <p class="text">Hahahaha</p>
            <p class="Preis">Gut</p>
          </div>
        </div>
        <div Klasse="btn" ref="btn">
            <button>Bearbeiten</button>
            <button style="background:#387ef5;color:#fff">Sammeln</button>
        </div>
    </div>
</Vorlage>

<Stil>
.Kasten{
    Position: relativ;
    Rahmen unten: 0,026667rem durchgezogen #666666;
}
.btn{
  Höhe: 100 %;
  Position: absolut;
  rechts:0;
  oben: 0;
  Hintergrund: rot;
  Anzeige: Flex;
}
Taste{
  Breite: 1,6rem;
  Höhe: 100 %;
  Hintergrund: #f8f8f8;
  Rand: keiner;
}
.Artikel{
  Polsterung: 0,266667rem;
  Anzeige: Flex;
  Position: relativ;
  Hintergrund:#fff;
  Z-Index: 2;
  Kastenschatten: 0,026667rem 0 0,053333rem #ddd;
}
.item img{
  Breite: 2,133333rem;
  Höhe: 2,133333rem;
  Rand rechts: 0,4rem;
  Randradius: 0,133333rem;
}

.Artikel .Titel{
  Schriftgröße: 0,48rem;
  schweben: links;
}
.Artikel .Text{
  Schriftgröße: 0,426667rem;
  Farbe: #888;
  schweben: links;
  Rand: 0 1,33rem;
}
.Artikel .Preis{
  Farbe: #888;
  schweben: links;
  Rand: 0 1,33rem;
}
</Stil>

<Skript>
    Standard exportieren {
        Name: "SlideBar",
        Requisiten: {

        },
        Daten (){
            zurückkehren {
                Flagge: falsch,
                startX: 0,
                EndeX: 0,
                Folienstil: {
                    links: 0,
                    Übergang: „keine“
                }
            }
        },
        Methoden: {
            start (e){ //Zeichne die Position der X-Achse des Bildschirms auf, wenn das Gleiten beginnt. this.flag = true;
                this.startX = e.touches[0].clientX;
                dies.endX = dies.$refs.slide.offsetLeft;
                this.slideStyle.transition = "keine";
            },
            bewegen (e){
                wenn(diese.flagge){
                    // Logik zur Handhabung der Mausbewegung var moveX = this.endX + (e.touches[0].clientX - this.startX); //Gleitdistanz berechnen if (Math.abs(moveX) >= this.$refs.btn.offsetWidth && moveX < 0) { //Beurteilen, ob die Gleitdistanz größer ist als die Breite von class:btn moveX = (Math.abs(moveX) - this.$refs.btn.offsetWidth) * 0.1; // 0.3 Widerstandskoeffizient this.slideStyle.left = - this.$refs.btn.offsetWidth - moveX + 'px';
                    }else if(moveX >= 0){ //Ist die Gleitdistanz größer oder gleich 0?
                        this.slideStyle.left = 0 + 'px'; //größer oder gleich 0, um class:item gleich 0 zu machen
                    }anders{
                        this.slideStyle.left = moveX + 'px'; //Kleiner als 0 macht class:item gleich der Gleitdistanz}
                }
            },
            Ende (e){
                wenn(diese.flagge){
                    diese.flagge = falsch;
                    // endX = Folie.OffsetLeft;
                    var moveX = e.changedTouches[0].clientX - this.startX; //Gleitdistanz berechnen this.slideStyle.transition = 'left .3s';
                    var btnWidth = this.$refs.btn.offsetWidth; //Klasse:btn-Breitewenn(moveX < 0){
                        if(Math.abs(moveX) >= btnWidth / 2 || Math.abs(this.$refs.slide.offsetLeft) >= this.$refs.btn.offsetWidth){ //Ist es größer als die halbe Breite von class:btn this.slideStyle.left = - btnWidth + 'px'; //Wenn Sie mehr als die halbe Breite von class:btn nach links schieben, schieben Sie zurück}else if(Math.abs(moveX) < btnWidth / 2){ //Kleiner als die halbe Breite von class:btn this.slideStyle.left = 0 + 'px'; //Wenn Sie nach links schieben, ohne die halbe Breite von class:btn zu überschreiten, kehren Sie zur Ausgangsposition zurück}
                    }sonst wenn(moveX > 0 && this.endX != 0){
                        wenn (Math.abs(moveX) >= btnWidth / 2) {
                            this.slideStyle.left = 0 + 'px'; //Mehr als die Hälfte der Breite von class:btn nach rechts schieben und dann wieder zurück}else if(Math.abs(moveX) < btnWidth / 2){
                            this.slideStyle.left = - btnWidth + 'px'; //Nach rechts schieben, ohne die Hälfte der Breite von class:btn zu überschreiten und zur Ausgangsposition zurückkehren}
                    }
                }
            }
        },
        montiert () {
            var _this = dies;
            // Verwende den modernen Event-Listener von js. Der Übergang beendet diesen. $refs.slide.addEventListener('transitionend',function(){
                _this.endX = dies.offsetLeft;
            })
        }
    }
</Skript>