Vue+Rem benutzerdefinierter Karusselleffekt

<Vorlage>
    <div Klasse="KonstruktionUp">
        <div Klasse="pub-hd">
            <h2>Bau-Upgrade-Paket</h2>
            <h3>Zusätzliche Dienste</h3>
        </div>
        <div id="AktivitätsDiv">
            <ul num="0" id="AktivitätUl">
               <li Klasse="AktivitätLi" v-for="(v,i) in Listendaten" :Schlüssel="i" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
                    <img src="static/imgs/package/bitmap.jpg">
                    <div Klasse="liText">
                        <p class="liTtitle">{{v.lititle}}</p>
                        <p class="liDes">1. Nach Baubeginn führen Kunde, Designer und Projektmanager eine Besprechung vor Ort durch. Bei persönlichen Projektänderungen werden die normalen Kundenänderungsverfahren befolgt (siehe: Kundenänderungsmitteilung);</p>
                        <p class="liDes">2. Wenn der Kunde nach dem Briefing aus irgendeinem Grund Änderungen am personalisierten Projekt wünscht, muss er neben den Kosten für das personalisierte Projekt auch die zusätzliche Überweisungsgebühr bezahlen. </p>
                         <p Klasse="liPreis">
                            <span class="title1">Preis des Themenpakets:￥</span>
                            <span class="title2">4500</span>
                            <span class="title3">Yuan</span>
                        </p>
                    </div>
                </li>
            </ul>
            <div Klasse="ZeigerDiv">
                <span :class="[currantIndex ===0 ? 'aktiv' : '', 'Zeiger']"></span>
                <span :class="[currantIndex ===1 ? 'aktiv' : '', 'Zeiger']"></span>
                <span :class="[currantIndex ===2 ? 'aktiv' : '', 'Zeiger']"></span>
            </div>
        </div>
    </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Daten () {
        zurückkehren {
            listData: [{lititle: 'Altbausanierung'}, {lititle: 'Altbausanierung 2'}, {lititle: 'Altbausanierung 3'}],
            liBreite: 0,
            liNummer: 0,
            startX: 0,
            EndeX: 0,
            aktuellerIndex: 0,
            Test: falsch
 
        }
    },
    montiert () {
        dies.initUlWidth()
    },
    Methoden: {
        initUlWidth () { // Initialisiere die Breite von ul let pit = document.documentElement.clientWidth / 750 // Das Verhältnis des aktuellen Handy-Bildschirms zum 750-Bildschirm let oldWidth = document.getElementsByClassName('activityLi')[0].offsetWidth // Die Breite eines einzelnen li let marginR = getComputedStyle(document.getElementsByClassName('activityLi')[0], null)['marginRight'] // Hole ein einzelnes marginRight, mit px
            lass marginNum = parseInt(marginR.replace('px', ''))
            this.liWidth = oldWidth + marginNum // einzelne Breite + maringRight
            let liCount = parseInt(document.getElementsByClassName('activityLi').length)// Anzahl der li this.liNum = liCount
            let ULpx = oldWidth * liCount + (liCount - 1) * marginNum // Der letzte Rand wird nicht gezählt document.getElementById('activityUl').style.width = ULpx / pit + 'px' // Durch das Verhältnis dividieren, damit die aktuelle Div-Breite dem Zweifachen des Designverhältnisses entspricht, die Länge von ul festlegen und der letzte Rand wird nicht gezählt },
        touchStart (e) {
            // Notieren Sie die Anfangsposition e.preventDefault() // Verhindern Sie Standardereignisse, Scrollen usw. this.startX = e.touches[0].clientX // Notieren Sie die Position, an der das Gleiten beginnt },
        touchEnd (e) {
            e.preventDefault() // Standardereignisse verhindern // Endposition aufzeichnen this.endX = e.changedTouches[0].clientX
            // Nach links wischen, wenn (this.startX - this.endX > 30) {
                console.log('Nach links wischen')
                wenn (dieser.currantIndex >= diese.liNum - 1) {
                    // Keine Operation } else {
                    dies.currantIndex++
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
                }
            }
            // Nach rechts wischen, wenn (this.startX - this.endX < -30) {
                wenn (this.currantIndex === 0) {
                    // Keine Operation } else {
                    dies.currantIndex--
                    document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
                }
            }
            this.startX = 0
            dies.endX = 0
        }
 
    }
}
</Skript>
 
<style lang="less" scoped>
    @import "~less/base.less";
    .KonstruktionUp{
        Breite: 100 %;
        .pub-hd{
            Polsterung: 0,8rem 0 0,6rem 0;
            Textausrichtung: zentriert;
            Hintergrundfarbe: #ffffff;
            h2{
                Schriftgröße: 0,32rem;
                Farbe: #606771;
            }
            h3{
                Rand oben: 0,26rem;
                Schriftgröße: 0,24rem;
                Farbe: #b9bec4;
            }
        }
        #AktivitätDiv{
            Polsterung links: 0,4rem;
            Hintergrundfarbe: #ffffff;
            Überlauf: versteckt;
            #AktivitätUl{
                Position: relativ;
                links: 0;
                Höhe: 8,06rem;
                Übergang: alle .35s sanft ein- und ausfahren;
                Hintergrundfarbe: #ffffff;
                .activityLi{
                    schweben: links;
                    Breite: 6,7rem;
                    Höhe: 8,06rem;
                    &:nicht(:letztes-Kind){
                        Rand rechts: 0,3rem;
                    }
                    Kastenschatten: 0 5px 25px 0 rgba(0,0,0,.4);
                    img{
                        Breite: 100 %;
                        Höhe: 3,6rem;
                    }
                    .liText{
                        Polsterung: 0 0,4rem;
                        Textausrichtung: links;
                        .liTtitle{
                            Polsterung: 0,48rem 0 0,36rem 0;
                            Schriftgröße: 0,34rem;
                            Farbe: #000000;
                        }
                        .liDes{
                            Schriftgröße: 0,2rem;
                            Farbe: #b5b5b5;
                        }
                    }
                    .liPreis{
                        Höhe: 0,28rem;
                        Zeilenhöhe: 0,28rem;
                        Farbe: @c-main; //Ändern Sie einfach die Farbe vertical-align: bottom;
                        Rand oben: 0,8rem;
                        .title1{
                            Anzeige: Inline-Block;
                            Schriftgröße: 0,22rem;
                        }
                         .title2{
                              Anzeige: Inline-Block;
                              Schriftgröße: 0,35rem;
                        }
                         .title3{
                              Anzeige: Inline-Block;
                              Schriftgröße: 0,22rem;
                        }
                    }
                }
            }
             .pointerDiv{
                Breite: 100 %;
                Höhe: 1,54rem;
                Hintergrundfarbe: #ffffff;
                Anzeige: Flex;
                Elemente ausrichten: zentrieren;
                Inhalt ausrichten: zentriert;
                .Zeiger{
                    Anzeige: Inline-Block;
                    Breite: 0,16rem;
                    Höhe: 0,16rem;
                    Hintergrundfarbe: #cccccc;
                    Randradius: 100 %;
                    &:n-tes-Kind(2){
                        Rand: 0 0,4rem;
                    }
                    &.aktiv{
                        Hintergrundfarbe: @c-main;
                    }
                }
            }
        }
    }
</Stil>