Micro-canales swiper subprograma

swiper

swiper ítems

Aquí Insertar imagen Descripción

Mira la pieza de código

<swiper style="width:100%;height:500rpx">
  <swiper-item style="background-color:#ff6900">
    <image src="/images/wx.png" ></image>
  </swiper-item>
</swiper>

Aquí Insertar imagen Descripción
Hemos establecido el ancho y alto de Swiper, swiper-artículo no establece automáticamente el tamaño del 100% swiper, pero swiper-elemento y el tamaño de la imagen no está definida.

Anchura y la altura deben ser proporcionados a la imagen:

<swiper style="width:100%;height:500rpx">
  <swiper-item style="background-color:#ff6900">
    <image src="/images/wx.png" style="width:100%;height:500rpx"></image>
  </swiper-item>
</swiper>

El patrón está escrito archivo wxss

swiper {
  width: 100%;
  height: 500rpx;
}

swiper image {
  width: 100%;
  height: 500rpx;
}

Un indicador acoplado a swiper, intervalo de reproducción automática es de 2 segundos

<swiper indicator-dots="true" autoplay="true" interval="2000">
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
</swiper>
Publicados 446 artículos originales · ganado elogios 67 · vistas 240 000 +

Supongo que te gusta

Origin blog.csdn.net/hongxue8888/article/details/104678613
Recomendado
Clasificación