Las trampas en el uso de Swiper, ¿en cuál caíste?

pozo de swiper

1. problema de nomenclatura

Ya sea en vue o en un programa pequeño, no podemos nombrar directamente el componente swiper como swiper.vue o Swiper.vue en mayúsculas. En este momento, habrá algunos problemas. Al transferir datos, la imagen puede desaparecer

2. problema de la unidad

En el programa pequeño, necesitamos usar rpx para cambiar el tamaño de esta imagen, y habrá algunos problemas con upx

C. Problema de altura

El tamaño de la imagen del swiper, esencialmente tendrá un tamaño de 150px (deberías prestar atención al problema de la unidad, pero no impide su altura por defecto de 150)

Solución: debe modificar manualmente la altura usted mismo:

código:

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