Miniprogramm zur Implementierung des Slider-Effekts

.Kasten {
    Breite: 100vw;
    Hintergrund: #F2F2F2;
    Übergang: alle 3er;
}

.box-b {
    Höhe: 8vh;
    Breite: 100 %;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Hintergrundfarbe: #FAFAFA;
    Elemente ausrichten: zentrieren;
    Polsterung: 0 30rpx;
    Box-Größe: Rahmenbox;
}

.box-r1 {
    Schriftgröße: 24rpx;
    Farbe: rot;
}

.box-r2 {
    Schriftgröße: 28rpx;
    Polsterung: 20rpx 50rpx;
    Randradius: 50rpx;
    Farbe: #fff;
    Hintergrundfarbe: #FF6C3B;
}

.box-t {
    Höhe: 92vh;
    Überlauf-y: automatisch;
    Überlauf-x: versteckt;
    Polsterung: 0 25rpx;
}

.box-top {
    Breite: 90vw;
    Höhe: 22vw;
    Rand oben: 20rpx;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: Abstand herum;
}

.boxs {
    Breite: 105vw;
    Höhe: 20vw;
    Rand oben: 20rpx;
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Inhalt ausrichten: Abstand herum;
}

.boxs-1 {
    Breite: 100vw;
    Höhe: 20vw;
    Hintergrund: weiß;
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Inhalt ausrichten: Abstand herum;
    Polsterung: 10rpx 0;
    Rahmenradius: 10px;
    Rand links: 20px;
}

.boxs-1 > Ansicht:erstes-Kind {
    Breite: 10vw;
    Zeilenhöhe: 18vw;
    Textausrichtung: zentriert;
    /* Hintergrund: #ccc; */
    Höhe: 20vw;
}

.boxs-1 > Ansicht:n-tes-Kind(2) {
    Breite: 20vw;
    /* Hintergrund: #ccc; */
    Höhe: 100%;
    Randradius: 20rpx;
}

Bild {
    Breite: 100 %;
    Höhe: 100%;
    Randradius: 20rpx;
}

.boxs-1 > Ansicht:letztes-Kind {
    Breite: 60vw;
    /* Hintergrund: #ccc; */
    Höhe: 100%;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: Abstand herum;
}
.boxs-1 > Ansicht:letztes-Kind>Ansicht{
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Inhalt ausrichten: Abstand herum;
    Position: relativ;
    links: 30rpx;
}
text {
    Breite: 60vw;
    Überlauf: versteckt;
    Textüberlauf: Auslassungspunkte;
    Leerzeichen: Nowrap;
}

.boxs-2 {
    Breite: 120rpx;
    Höhe: 170rpx;
    Textausrichtung: zentriert;
    Zeilenhöhe: 170rpx;
    Hintergrund: #e64340;
    Schriftgröße: 24rpx;
    Farbe: #fff;
    Rahmen oben rechts – Radius: 10px;
    Rahmen unten rechts – Radius: 10px;
}
.roter_wagen{
    Farbe: rot;
    Position: relativ;
    rechts: 40px;
}

<Klasse anzeigen="Box">
    <Ansichtsklasse="box-t">
        <beweglicher Bereich Klasse="Box-Top" wx:für="{{Liste}}" wx:Schlüssel="Index">
            <bewegliche Ansicht Klasse="Boxen"
                          Richtung="horizontal"
                          Animation = "{{true}}"
                          Trägheit="wahr"
                          außerhalb der Grenzen = "falsch"
            >
                <Ansichtsklasse="boxs-1">
                    <Ansicht>
                        <checkbox aktiviert="{{ausgewählt}}" wx:key="index" bindtap="chec" data-selected="{{item}}"></checkbox>
                    </Ansicht>
                    <Ansicht>
                        <image src="{{item.pic}}"></image>
                    </Ansicht>
                    <Klasse anzeigen="Warenkorbliste">
                        <text>{{item.name}}</text>
                        <Ansicht>
                            <view class="red_cart">￥{{item.price}}</view>
                            <Ansicht>
                                <van-stepper Klasse="cart_vant"
                                        Wert="{{ Artikelnummer }}"
                                        bind:change="beiÄnderung" data-key="{{item.key}}"/>
                            </Ansicht>
                        </Ansicht>
                    </Ansicht>
                </Ansicht>
                <view class="boxs-2" bindtap="del" data-key="{{item.key}}">Löschen</view>
            </bewegliche-Ansicht>
        </beweglicher-Bereich>
    </Ansicht>
    <Ansichtsklasse="box-b">
        <view class="box-r1">Gesamt:￥{{Preis}}</view>
        <view class="box-r2">Zur Kasse gehen</view>
    </Ansicht>
</Ansicht>

// Seiten/Verkäufe/Verkäufe.js
lassen {
    getShop,
    getRemove,
    Nummer ändern,
    getSelected
} = erfordern('../../http/api')
Seite({
    beiShareAppMessage() {
        zurückkehren {
            Titel: 'bewegliche Ansicht',
            Pfad: „Seite/Komponente/Seiten/bewegliche-Ansicht/bewegliche-Ansicht“
        }
    },

    Daten: {
        x: 0,
        Maßstab: 2,
        list: [], //Sie können jetzt den Listendatentest mit price: 0 definieren,
        ausgewählt: []
    },
    del(e) {
        Konsole.log(e.currentTarget.dataset.key)
        var Schlüssel = e.currentTarget.dataset.key
        var token = wx.getStorageSync('token')
        getRemove(Token, Schlüssel).dann(res => {
            // konsole.log(res)
        })
        dies.getShop()
    },
    beiÄnderung(e) {
        Konsole.log(e.currentTarget.dataset.key)
        Konsole.log(e.detail)
        var token = wx.getStorageSync('token')
        var Schlüssel = e.currentTarget.dataset.key
        Variablennummer = e.detail
        modifyNumber(Token, Schlüssel, Nummer).then(res => {
            // konsole.log(res)
        })
        dies.getShop()
    },
    klopfen() {
        dies.setData({
            x: 0,
        })
    },
    getShop() {
        getShop().then(res => {
            dies.setData({
                Liste: res.items
            })
        })
    },
    chec(e) {
        dies.getShop()
    },
    onLoad: Funktion (Optionen) {
        getShop().then(res => {
            dies.setData({
                Liste: res.items
            })
            diese.Datenliste.fürJeden(i => {
                var token = wx.getStorageSync('token')
                var Schlüssel = i.Schlüssel
                var ausgewählt = i.ausgewählt
                dies.setData({
                    ausgewählt: ausgewählt
                })
                getSelected(Token, Schlüssel, ausgewählt).then(res => {
                    dies.setData({
                        Preis: res.data.price
                    })
                })
            })


        })

    },
    onShow: Funktion () {
        dies.getShop()
        wenn (wx.getStorageSync('token')) {
            wx.hideLoading()
        } anders {
            wx.showLoading({
                Titel: 'Bitte loggen Sie sich ein',
            })
        }
    },


    /**
     * Lebenszyklusfunktion - Achten Sie auf das Ausblenden von Seiten */
    onHide: Funktion () {

    },

    /**
     * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
    beimEntladen: Funktion () {

    },


    onReady: Funktion () {

    },
    /**
     * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
    onPullDownRefresh: Funktion () {

    },

    /**
     * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
    onReachBottom: Funktion () {

    },

    /**
     * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
})