Pequeño el desarrollo del programa de micro-canales (vi) Producción de bucle de la figura

A menudo vemos, contiene una imagen de desplazamiento carrusel circular en el applet, se trata de cómo hacerlo, este artículo se llevará a completar el look, esta función.

Echemos un vistazo a las representaciones completado:

 

 

A partir de las representaciones, podemos ver que hay carrusel Figura 3, haga clic en las imágenes del carrusel, la página actual puede también responden.

Estableció por primera vez en el proyecto de la carpeta de imágenes de raíces y listos tres imágenes en ellos. Específicamente, como se muestra:

 

 código de referencia específica:

código js:

(Página { 
  / * * 
   *页面的数据初始
   * / 
  datos: { 
    imageItems: [{ 
      id: 1 , 
      imgsrc: "../../images/1.png" , 
      enlace: "http: // www. test.com/id=1" 
    }, { 
      id: 2 , 
      imgsrc: "../../images/2.png" , 
      enlace: "http://www.test.com/id=2" 
    }, { 
      id: 15 , 
      imgsrc: "../../images/15.png" , 
      enlace: "http://www.test.com/id=15" 
    }], 
    información: ""
  },
  / * Haga clic en el controlador de eventos imagen * / 
  imgTap: función (params) {
     / * * 
     conjunto de parámetros * params pase nombre sobre 
     la página * wxml a través de datos en - Formato ** pase sobre 
     * por params.currentTarget en función js. . ** conjunto de datos camino para conseguir el 
     * / 
    / * * pase depurador sobre el parámetro de salida de la consola Enlace * / 
    console.info (params.currentTarget.dataset.link); 
    / * * por consejos pasar sobre la Identificación del parámetro visualizado 
     * Tenga en cuenta que, el título sólo puede aceptar un valor de tipo cadena, ya que la identificación es un número entero, por lo que tenemos que utilizar + "" enfoque para convertir en 
     * / 
    wx.showToast ({ 
      título: params.currentTarget.dataset.id + "" , 
    }) 
    / * * el siguiente código muestra cómo los valores del conjunto de datos dinámicos 
     * aviso Ajuste el valor del parámetro a pasar por encima de Enlace 
    * / 
    el presente.setData ({ 
      Info: params.currentTarget.dataset.link 
    }) 
  } 
})

 

 código del archivo wxss:

.swiperItem { 
    anchura : 100% ; 
    altura : 500rpx ;    
}

 

código del archivo wxml:

< Swiper clase = "swiperItem" indicador-puntos = "true" indicador de color = "RGBA (0,0,0, 0,3)" reproducción automática = "true"  
    intervalo = "5000" duración = "1000" circular = "true " > 
    
    < bloque de WX: a =" {{imageItems}}" WX: clave = "* esta" WX: Con fines de elemento = "img" > 
        < swiper-elemento > 
            < imagen de clase = "swiperItem" bindtap = "imgTap" enlace de datos ="{{}} img.link" datos-id = "{{}} img.id" src= "{{}} img.imgsrc" modo = "aaspectFill" perezosa carga = "false" >              
            </ imagen > 
        </ ítems swiper > 
    </ bloque > 
</ swiper > 

< texto estilo = "color: red; anchura: 100%; altura: 50rpx" > {{info}} </ texto >

 

carta de micro foto carrusel applet, ofrece unas componentes listos para Swiper para nosotros.

La principal swiper Descripción del inmueble:

indicadoras-puntos: indicador de si la rotación, es decir, por debajo del punto

Reproducción automática: si jugar de forma automática

intervalo: cada intervalo de tiempo de conmutación de la imagen, en milisegundos

duración: de conmutación toma milisegundos

Otro uso específico, ver el documento que, los niños.

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 

La principal explicación:

bindtap se acontecimientos de unión, imgTap se realiza en la función de respuesta a incidentes js

DATA- * * parámetros pasados ​​al evento, que es el nombre del parámetro *, la presente realización dos parámetros de transmisión, enlace y Identificación

OK! Carrusel terminó cerca! Hay preguntas, comentarios!

Me preocupa, obtendrá una mejor experiencia de aprendizaje!