Die Fallstricke bei der Verwendung von Swiper, in welche sind Sie geraten?

Swipers Grube

1. Namensproblem

Ob in vue oder in einem kleinen Programm, wir können die Swiper-Komponente nicht direkt als swiper.vue oder Swiper.vue in Großbuchstaben bezeichnen. Zu diesem Zeitpunkt wird es einige Probleme geben. Beim Übertragen von Daten kann das Bild verschwinden

2. Einheitenproblem

In dem kleinen Programm müssen wir rpx verwenden, um die Größe dieses Bildes zu ändern, und es wird einige Probleme mit upx geben

c. Höhenproblem

Die Größe des Swiper-Bildes, es wird im Wesentlichen eine Größe von 150px haben (Sie sollten auf das Problem der Einheit achten, aber es behindert nicht seine Standardhöhe von 150)

Lösung: Sie müssen die Höhe selbst manuell ändern:

Code:

swiper{
    width: 100%;
    height: 400rpx;
    .swiper-item{
       image{
       width: 100%;
       height: 400rpx;
             }
          }
        }