Das WeChat-Applet erkennt den Effekt des Wischens nach links zum Löschen von Listenelementen

Das WeChat-Applet erkennt den Effekt des Wischens nach links zum Löschen von Listenelementen

In diesem Artikel wird der spezifische Code für das WeChat Mini-Programm beschrieben, mit dem Sie Listenelemente löschen können, indem Sie nach links wischen. Der spezifische Inhalt ist wie folgt

Wirkung

Bild

WXML

<Klasse anzeigen="Container">
  <!-- Lieferadresse-->
  <view class="Adresse">
    <Ansichtsklasse="links">
      <Klasse anzeigen="Symbol">
        <image src="../../images/address.png"></image>
      </Ansicht>
      <Ansichtsklasse="txt-wrap">
        <view class="txt">SOLANA Blue Harbor, Bezirk Chaoyang, Peking</view>
      </Ansicht>
    </Ansicht>
    <Ansichtsklasse="rechts">
      <Ansicht Klasse="Zeile"></Ansicht>
      <view class="txt">Bearbeiten</view>
    </Ansicht>
  </Ansicht>
  <Klasse anzeigen="Liste">
    <Ansichtsklasse="Element" wx:für="{{Liste}}" wx:Schlüssel="index">
      <!-- Produktkopfinformationen-->
      <Klasse anzeigen="Kopf">
        <view class="head-icon" bindtap="selectItem" data-index="{{index}}">
          <image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
        </Ansicht>
        <Ansichtsklasse="von">
          <Ansichtsklasse="links">
            <Ansichtsklasse="storeImg">
              <Bild src="../../images/store.png"></Bild>
            </Ansicht>
            <view class="storeName">{{item.storeName}}</view>
            <Ansichtsklasse="Pfeil">
               <image src="../../images/arrow.png"></image>
            </Ansicht>
          </Ansicht>
          <Ansichtsklasse="rechts">
            <view class="freight">Kostenloser Versand</view>
            <view class="coupon">Gutschein</view>
          </Ansicht>
        </Ansicht>
      </Ansicht>
      <!-- Informationen zum Produktinhalt-->
      <Ansichtsklasse="forts">
        <Ansichtsklasse="Wrap"
           bindtouchstart="touchStart"
           bindtouchmove="touchMove"
           Datenindex="{{index}}"
           Stil="links: -{{item.x}}rpx" />
          <Ansichtsklasse="cont-icon">
            <view class="img-wrap" bindtap="selectItem" data-index="{{index}}">
              <image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
            </Ansicht>
            <Klasse anzeigen="img">
              <Bild src="{{item.imgUrl}}"></Bild>
            </Ansicht>
          </Ansicht>
          <Klasse anzeigen="info">
            <view class="name">{{item.name}}</view>
            <Klasse anzeigen="specs-wrap">
              <view class="specs">{{item.specs}}</view>
            </Ansicht>
            <Ansichtsklasse="Rabatt-Wrap">
              <view class="Rabatt">{{Artikel.Rabatt}}</view>
            </Ansicht>
            <Klasse anzeigen="Preis-Wrap">
              <Klasse anzeigen="Preis">
                <text>¥</text>{{Artikelpreis}}<text>,00</text>
              </Ansicht>
              <Ansichtsklasse="num">
                <view class="reduzieren" bindtap="reduzieren" data-index="{{index}}">-</view>
                <Eingabeklasse="inp" 
                       Typ="Nummer"
                       Wert="{{item.num}}"
                       maximale Länge = "4"
                       bindinput="bindNumInput"
                       bindblur="bindNumBlur"
                       Datenindex="{{index}}"/>
                <view class="hinzufügen" bindtap="hinzufügen" data-index="{{index}}">+</view>
              </Ansicht>
            </Ansicht>
          </Ansicht>
          <!-- Wischen Sie nach rechts, um das Produkt zu löschen -->
          <view class="del" bindtap="delete" data-index="{{index}}">Löschen</view>
        </Ansicht>
      </Ansicht>
    </Ansicht>
  </Ansicht>
  <!-- Alles auswählen, Gesamt, Abrechnung -->
  <Ansichtsklasse="gesamt">
    <view class="total-icon" bindtap="alleAuswählen">
      <Klasse anzeigen="img">
        <image src="{{Alles auswählen ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
      </Ansicht>
      <text style="font-size: 26rpx;">Alles auswählen</text>
    </Ansicht>
    <Ansichtsklasse="Settle">
      <Klasse anzeigen="Preis">
        Gesamt <text style="margin: 0 4rpx;">:</text>
        <text style="font-size: 30rpx;font-weight: 800;">¥{{Gesamtpreis}}</text>
      </Ansicht>
      <view class="btn" wx:if="{{totalNum > 0}}">
        Zur Kasse gehen<text style="margin-left: 4rpx;">({{totalNum}})</text>
      </Ansicht>
      <Ansichtsklasse="btn" wx:else>
        Zur Kasse gehen<text style="margin-left: 4rpx;">(0)</text>
      </Ansicht>
    </Ansicht>
  </Ansicht>
</Ansicht>

JS

Seite({
  /**
   * Ausgangsdaten der Seite */
  Daten: {
    Liste: [
      {
        ID: 1, 
        Name: „Apple/Apple 15,4 Zoll 2,2 GHz MacBook Pro 256G Quad-Core i7 Prozessor 256G Laptop Notebook Business Office Student Arbeitszimmer Heimcomputer“,
        imgUrl: '../../images/0.png',
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: „Spot 5788 graue unabhängige Grafikkarte i7/16G/1T/6G der 10. Generation“,
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '11999'
      },
      { 
        ID: 2, 
        Name: „Apple 13-Zoll MacBook Pro 1,4 GHz Quad-Core-Prozessor (Turbo Boost bis zu 3,9 GHz) 256 GB Speicher Touch Bar und Touch ID“,
        imgUrl: '../../images/1.png', 
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: 'Spot 5749 Weiß 10. Generation i7/16G/1T',
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '11245', 
      },
      { 
        ID: 3, 
        Name: „Apple 13-Zoll MacBook Air 1,1 GHz Dual-Core Core i3 Prozessor, Turbo Boost bis zu 3,2 GHz 256 GB Speicher Touch ID“, 
        imgUrl: '../../images/2.png',
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: „Auf Lager: Unabhängige Grafikkarte i7/16G/1T/4G der 9. Generation“,
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '9245'
      },
      { 
        ID: 4, 
        Name: „Apple 13-Zoll MacBook Pro 1,4 GHz Quad-Core-Prozessor (Turbo Boost bis zu 3,9 GHz) 512 GB Speicher Touch Bar und Touch ID“, 
        imgUrl: '../../images/3.png',
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: „i7/500G/integrierte Grafikkarte“,
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '11499'
      },
      { 
        ID: 5, 
        Name: „[Original versiegeltes Produkt] 20 Modelle des Apple 13,3-Zoll MacBook Pro 512G Laptops mit Touch Bar ID Leichter und tragbarer Business-Office-Laptop“, 
        imgUrl: '../../images/4.png',
        storeName: 'Wow offizieller Flagship-Store',
        Spezifikationen: „Spot 5746 weiß i5/8G/500G/integrierte Grafik“,
        Rabatt: 'Umtausch bei Einkäufen über 3000',
        Zahl: 1,
        Preis: '14499'
      }
    ],
    selectAll: false, // Ob alles ausgewählt werden soll totalNum: 0, // Die Gesamtzahl der ausgewählten Artikel totalPrice: 0, // Der Gesamtpreis der ausgewählten Artikel startX: 0, // Die anfängliche X-Achsenkoordinate der Fingerberührung startY: 0 // Die anfängliche Y-Achsenkoordinate der Fingerberührung },

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {
    
  },
  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {
    diese.Datenliste.fürJeden((Element)=> {
      item.flag = false // Gibt an, ob das Element basierend auf dem Feld item.x = 0 ausgewählt ist // Die Anfangsposition der relativen Positionierung jedes Listenelements})
  },
  // Wähle ein einzelnes Element aus und berechne den Gesamtpreis des ausgewählten Elements selectItem(e) {
    let index = e.currentTarget.dataset.index
    let flag = diese.Daten.Liste[index].flag
    wenn(flag == false) {
      diese.Daten.Liste[Index].Flag = true
    } anders {
      diese.Datenliste[index].flag = false
    }
    // Bestimmen, ob alle Elemente ausgewählt sind let bool = this.data.list.every((item) => {
      Artikelflagge zurückgeben
    })
    dies.setData({
      Alles auswählen: bool,
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Reduziere die Menge und berechne den Gesamtpreis der ausgewählten Artikel reduce(e) {
    let index = e.currentTarget.dataset.index
    let num = diese.Daten.Liste[index].num
    // Bestimmen Sie, ob die aktuelle Anzahl der Produkte größer als 1 ist. Wenn sie größer als 1 ist, können Sie sie reduzieren, wenn (num > 1) {
      diese.Daten.Liste[Index].num = num - 1
    }
    dies.setData({
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Eingabemenge bindNumInput(e) {
    let val = e.detail.wert
    let index = e.currentTarget.dataset.index
    wenn(Zahl(Wert) == 0) {
      diese.Daten.Liste[Index].Anzahl = 1
    } anders {
      this.data.list[index].num = Zahl(Wert)
    }
  },
  // Fokus verlieren, Gesamtpreis der ausgewählten Artikel berechnen bindNumBlur() {
    dies.setData({
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Erhöhen Sie die Anzahl der Artikel und berechnen Sie den Gesamtpreis der ausgewählten Artikel add(e) {
    let index = e.currentTarget.dataset.index
    let num = diese.Daten.Liste[index].num
    diese.Daten.Liste[Index].Nummer = Nummer + 1
    dies.setData({
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Die Startkoordinaten des Fingers touchStart(e) {
    this.data.startX = e.touches[0].clientX;
    this.data.startY = e.touches[0].clientY;
  },
  // Listenelement verschieben touchMove(e) {
    let index = e.currentTarget.dataset.index
    // Aktuelle Koordinaten abrufen let currentX = e.touches[0].clientX;
    lass currentY = e.touches[0].clientY;
    let x = this.data.startX - currentX; //horizontale Bewegungsdistanz let y = Math.abs(this.data.startY - currentY); //vertikale Bewegungsdistanz, wenn es sich ein wenig nach links bewegt, ist es auch akzeptabel if (x > 35 && y < 110) {
    // Zum Löschen nach links wischen this.data.list[index].x = 110; 
      dies.setData({
        Liste: diese.Daten.Liste
      })
    } sonst wenn (x < -35 && y < 110) {
      //Nach rechts schieben this.data.list[index].x = 0; 
      dies.setData({
        Liste: diese.Daten.Liste
      })
    }
  },
  // Lösche das Listenelement, berechne den Gesamtpreis und alle ausgewählten Status neu delete(e) {
    let index = e.currentTarget.dataset.index
    diese.Daten.Liste.splice(Index, 1)
    dies.setData({
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Alles auswählen allSelect() {
    // Prüfen ob alle ausgewählt sind, wenn ja, alle abwählen, sonst alle auswählen und Gesamtpreis berechnen if(this.data.selectAll) {
      diese.Datenliste.fürJeden((Element)=>{
        item.flag = falsch
      })
      this.data.selectAll = falsch
    } anders {
      diese.Datenliste.fürJeden((Element)=>{
        item.flag = wahr
      })
      diese.Daten.Alles auswählen = true
    }
    dies.setData({
      wähleAlles aus: diese.Daten.wähleAlles aus,
      Liste: diese.Daten.Liste
    })
    dies.countPrice()
  },
  // Berechnen Sie den Gesamtpreis des ausgewählten countPrice() {
    // Bestimmen Sie, ob ausgewählte Elemente vorhanden sind. Wenn ja, berechnen Sie sie. Wenn nein, löschen Sie alle ausgewählten Elemente, den Gesamtpreis und die Anzahl der abgerechneten Elemente. let bool = this.data.list.some((item) => {
      Artikelflagge zurückgeben
    })
    wenn(bool) {
      // Bei jeder Neuberechnung die zuletzt aufgezeichneten Daten löschen this.data.totalNum = 0 
      this.data.totalPrice = 0
      diese.Datenliste.fürJeden((Element)=>{
        wenn(item.flag == true) {
          this.data.totalPrice += (Artikelpreis * Artikelnummer)
          diese.Daten.Gesamtzahl += Artikelzahl
        }
      })
    } anders {
      this.data.totalNum = 0
      this.data.totalPrice = 0
      this.data.selectAll = falsch
    }
    dies.setData({
      Gesamtanzahl: diese.Daten.Gesamtanzahl,
      Gesamtpreis: this.data.totalPrice,
      Alles auswählen: diese.Daten.Alles auswählen
    })
  }
})

WXSS

Seite {
  Hintergrund: #f2f2f2;
}
.container {
  Breite: 100 %;
  Polsterung unten: 90rpx;
  Box-Größe: Rahmenbox;
  Überlauf-y: scrollen;
}
.Adresse {
  Breite: 100 %;
  Höhe: 80rpx;
  Hintergrund: #fff;
  Rahmen unten links – Radius: 20rpx;
  Rahmen unten rechts – Radius: 20rpx;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
  Schriftgröße: 28rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Rand unten: 20rpx;
}
.Adresse .links {
  biegen: 1;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
.Adresse .links .Symbol {
  Breite: 32rpx;
  Höhe: 35rpx;
  Rand rechts: 8rpx;
}
.Adresse .links .Symbol Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.Adresse .links .txt-wrap {
  Breite: 0;
  biegen: 1;
}
.Adresse .links .txt-wrap .txt {
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Leerzeichen: Nowrap;
  Polsterung rechts: 10rpx;
  Box-Größe: Rahmenbox;
}
.Adresse .rechts {
  Breite: 80rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
.Adresse .rechts .Zeile {
  Breite: 0px;
  Höhe: 26rpx;
  Rahmen links: 4rpx durchgezogen #bfbfbf;
}
.Adresse .rechts .txt {
  biegen: 1;
  Textausrichtung: rechts;
}

.Liste {
  Breite: 100 %;
}
.Liste .Artikel {
  Breite: 100 %;
  Randradius: 20rpx;
  Polsterung: 30rpx 0;
  Box-Größe: Rahmenbox;
  Hintergrund: #ffffff;
  Rand unten: 20rpx;
}

/* Produktkopfinformationen*/
.Liste .Artikel .Kopf {
  Breite: 100 %;
  Schriftgröße: 26rpx;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Rand unten: 20rpx;
}
/* Symbol „Produkt ausgewählt“*/
.Liste .Element .Kopf .Kopf-Symbol {
  Breite: 40rpx;
  Höhe: 40rpx;
  Rand rechts: 26rpx;
  Randradius: 100 %;
  Box-Shadow: 0 0 10rpx hellgrau;
}
.Liste .Element .Kopf .Kopf-Symbol Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.Liste .Artikel .Kopf .von {
  biegen: 1;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
}
.Liste .Artikel .Kopf .von .links {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
.list .item .head .von .left .storeImg {
  Breite: 26rpx;
  Höhe: 26rpx;
  Rand oben: -4rpx;
  Rand rechts: 8rpx;
}
.list .item .head .von .left .storeImg Bild {
  Breite: 100 %;
  Höhe: 100%;
}
/* Name des Shops */
.list .item .head .von .left .storeName {
  biegen: 1;
  Rand rechts: 14rpx;
}
/* Pfeil nach rechts */
.list .item .head .von .links .pfeil {
  Breite: 8rpx;
  Höhe: 34rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}
.list .item .head .von .links .arrow image {
  Breite: 100 %;
  Höhe: 16rpx;
.Liste .Artikel .Kopf .von .rechts {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Ende;
}
/* Kostenloser Versand*/
.list .item .head .von .rechts .freight {
  Schriftgröße: 22rpx;
  Farbe: #1e1e1e;
}
/* Gutschein */
.list .item .head .von .rechts .coupon {
  Schriftgröße: 24rpx;
  Polsterung: 4rpx 14rpx;
  Hintergrund: #ffeded;
  Randradius: 20rpx;
  Rand links: 16rpx;
  Farbe: #ffaa7f;
}

/* Produktinformationen */
.Liste .Artikel .cont {
  Breite: 100 %;
  Überlauf: versteckt;
  Schriftgröße: 26rpx;
}
.Liste .Element .cont .wrap {
  Breite: 100 %;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
  Anzeige: Flex;
  Inhalt ausrichten: Flex-Start;
  Übergang: alle 0,2 s;
  Position: relativ;
  oben: 0;
  links: 0;
}
/* Schaltfläche zum Löschen des Produkt-Slicks */
.Liste .Element .cont .wrap .del {
  Breite: 110rpx;
  Höhe: 100%;
  Hintergrund: #ffaa7f;
  Schriftgröße: 24rpx;
  Farbe: #fff;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Position: absolut;
  oben: 0;
  rechts: -110rpx;
}
.Liste .Element .cont .wrap .cont-Symbol {
  Anzeige: Flex;
  Rand rechts: 26rpx;
}
/* Symbol für ausgewähltes oder nicht ausgewähltes Produkt*/
.Liste .Element .cont .wrap .cont-icon .img-wrap {
  Breite: 40rpx;
  Höhe: 40rpx;
  Rand rechts: 26rpx;
  Randradius: 100 %;
  Box-Shadow: 0 0 10rpx hellgrau;
  Position: relativ;
  oben: 72rpx;
  links: 0;
}
.list .item .cont .wrap .cont-icon .img-wrap Bild {
  Breite: 100 %;
  Höhe: 100%;
}
/* Produktbild*/
.Liste .Element .cont .wrap .cont-icon .img {
  Breite: 190rpx;
  Höhe: 190rpx;
  Rahmenradius: 10rpx;
  Box-Shadow: 0 0 10rpx hellgrau;
  Überlauf: versteckt;
}
.list .item .cont .wrap .cont-icon .img Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.Liste .Artikel .cont .wrap .info {
  biegen: 1;
  Breite: 0;
}
/* Produktname*/
.Liste .Element .cont .wrap .info .name {
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Anzeige: -webkit-box;
  -Webkit-Leitungsklemme: 2;
  -webkit-box-orient: vertikal;
  Rand unten: 10rpx;
}
/* Produktspezifikationen */
.list .item .cont .wrap .info .specs-wrap {
  Breite: 100 %;
  Schriftgröße: 24rpx;
  Polsterung rechts: 12rpx;
  Rahmenradius: 18rpx;
  Box-Größe: Rahmenbox;
  Rand unten: 8rpx;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Leerzeichen: Nowrap;
}
.list .item .cont .wrap .info .specs-wrap .specs {
  Anzeige: Inline-Block;
  Hintergrund: #f2f2f2;
  Rahmenradius: 18rpx;
  Polsterung: 4rpx 16rpx 4rpx 16rpx;
  Box-Größe: Rahmenbox;
}
/* Produktrabatt*/
.list .item .wrap .wrap .cont .info .discount-wrap {
  Breite: 100 %;
  Schriftgröße: 24rpx;
}
.list .item .cont .wrap .info .discount-wrap .discount {
  Anzeige: Inline-Block;
  Hintergrund: #f2f2f2;
  Rahmenradius: 18rpx;
  Polsterung: 4rpx 20rpx 4rpx 16rpx;
  Box-Größe: Rahmenbox;
}
/* Produktpreis*/
.Liste .Artikel .cont .wrap .info .price-wrap {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Rand oben: 8rpx;
}
.list .item .cont .wrap .info .price-wrap .price {
  Schriftgröße: 36rpx;
  Schriftstärke: 700;
  Farbe: #ffaa7f;
}
.list .item .cont .wrap .info .price-wrap .price text {
  Schriftgröße: 24rpx;
}
/* Produktmenge */
.Liste .Artikel .cont .wrap .info .price-wrap .num {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Ende;
}
.list .item .cont .wrap .info .price-wrap .num .reduce {
  Breite: 40rpx;
  Schriftstärke: 800;
  Farbe: #262626;
  Textausrichtung: zentriert;
  Zeilenhöhe: 40rpx;
}
.list .item .cont .wrap .info .price-wrap .num .inp {
  Breite: 80rpx;
  Höhe: 40rpx;
  Mindesthöhe: 40rpx;
  Textausrichtung: zentriert;
  Hintergrund: #f2f2f2;
  Rand: 0 2rpx;
}
.list .item .cont .wrap .info .price-wrap .num .add {
  Breite: 40rpx;
  Schriftstärke: 800;
  Farbe: #262626;
  Textausrichtung: zentriert;
  Zeilenhöhe: 40rpx;
}

/*Alles auswählen, Gesamt, Abrechnung*/
.gesamt {
  Breite: 100 %;
  Höhe: 90rpx;
  Hintergrund: #fff;
  Polsterung: 0 20rpx 0 30rpx;
  Box-Größe: Rahmenbox;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Position: fest;
  links: 0;
  unten: 0;
  Z-Index: 99;
}
.gesamt .gesamt-Symbol {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Start;
}
.total .total-Symbol .img {
  Breite: 40rpx;
  Höhe: 40rpx;
  Rand rechts: 14rpx;
  Randradius: 100 %;
  Box-Shadow: 0 0 10rpx hellgrau;
}
.total .total-icon Bild {
  Breite: 100 %;
  Höhe: 100%;
}
.gesamt .setzen {
  Schriftgröße: 24rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Flex-Ende;
}
.Gesamt .Abwicklung .Preis {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Rand rechts: 16rpx;
}
.total .begleichen .btn {
  Höhe: 60rpx;
  Hintergrund: #ffaa7f;
  Randradius: 30rpx;
  Polsterung: 0 30rpx;
  Box-Größe: Rahmenbox;
  Schriftgröße: 24rpx;
  Farbe: #fff;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Das WeChat-Applet realisiert den Löscheffekt durch Wischen nach links
  • Codebeispiel für das WeChat-Applet: Wischen nach links zum Löschen
  • WeChat-Applet implementiert Wischen nach links zum Löschen der Lieferadresse
  • Das WeChat-Applet realisiert den Löscheffekt durch Wischen nach links
  • Detaillierte Erläuterung des Entwicklungsfalls der Funktion „Nach links wischen zum Löschen“ in WeChat-Miniprogrammen
  • Wischen Sie nach links, um ein Element in der WeChat-Miniprogrammliste zu löschen
  • Das WeChat-Applet implementiert Wischen nach links zum Ändern und Löschen von Funktionen
  • WeChat Mini-Programm: Zum Löschen wischen (zum Löschen nach links wischen)
  • Implementierung der Wisch-nach-links-Löschfunktion im WeChat-Applet
  • Implementierungscode des Löscheffekts durch Wischen nach links im WeChat-Applet

<<:  So installieren Sie Linux Flash

>>:  Lösung für das Problem der Nullspalte in der NOT IN-Füllgrube in MySQL

Artikel empfehlen

Docker verwendet Busybox, um ein Basis-Image zu erstellen

Die erste Zeile eines Docker-Images beginnt mit e...

So zeigen Sie Bildinformationen in Docker an

In diesem Artikel müssen wir lernen, wie man Bild...

JS removeAttribute()-Methode zum Löschen eines Attributs eines Elements

Verwenden Sie in JavaScript die Methode removeAtt...

Erläuterung des Beispiels für die automatische Anmeldung unter Linux

Es gibt viele Skripte im Internet, die expect ver...

Datenbankabfrageoptimierung: Unterabfrageoptimierung

1. Fall Nehmen Sie alle Mitarbeiter, die nicht Fi...

Interpretation von syslogd- und syslog.conf-Dateien unter Linux

1: Einführung in syslog.conf Für verschiedene Uni...

Allgemeine Linux-Befehle chmod zum Ändern der Dateiberechtigungen 777 und 754

Der folgende Befehl wird häufig verwendet: chmod ...

Implementierung und Optimierung von MySql-Unterabfragen IN

Inhaltsverzeichnis Warum ist IN langsam? Was ist ...