desenvolvimento de programa de pequenas micro-canal (vi) Preparação de ciclo FIG

Muitas vezes vemos, contém uma imagem circular rolagem carrossel no applet, este é como fazê-lo, neste artigo vou levá-lo para completar o look, esta função.

Vamos olhar renderizações completou:

 

 

A partir das representações, podemos ver que há Carousel Figura 3, clique no carrossel fotos, a página atual também pode reagir.

Estabelecido pela primeira vez no projeto pasta de imagens de raiz e prontos três imagens sobre eles. Especificamente, como mostrado:

 

 código de referência específica:

código de arquivo js:

Página ({ 
  / * * 
   *页面的初始数据
   * / 
  dados: { 
    imageItems: [{ 
      id: 1 , 
      imgsrc: "../../images/1.png" , 
      Link: "http: // www. test.com/id=1" 
    }, { 
      id: 2 , 
      imgsrc: "../../images/2.png" , 
      link: "http://www.test.com/id=2" 
    }, { 
      id: 15 , 
      imgsrc: "../../images/15.png" , 
      link: "http://www.test.com/id=15" 
    }], 
    informação: ""
  },
  / * Clique no manipulador de eventos imagem * / 
  imgTap: função (params) {
     / * * 
     conjunto de parâmetros * params passe nome ao longo 
     página wxml * através de dados em - passe Formato ** sobre 
     * por params.currentTarget em função js. . dataset maneira ** para obter o 
     * / 
    / * * passagem depurador sobre a saída do console parâmetro link * / 
    console.info (params.currentTarget.dataset.link); 
    / * * por dicas passar o id parâmetro exibido 
     * Nota que, título só pode aceitar um valor tipo de cadeia, uma vez que id é um inteiro, então precisamos usar + "" abordagem para converter em 
     * / 
    wx.showToast ({ 
      título: params.currentTarget.dataset.id + "" , 
    }) 
    / * * os seguintes mostra o código como os valores do conjunto de dados dinâmica 
     * Informação definir o valor do parâmetro para passar link 
    * / 
    o presente.setData ({ 
      informações: params.currentTarget.dataset.link 
    }) 
  } 
})

 

 código de arquivo wxss:

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

 

código de arquivo wxml:

< Swiper classe = "swiperItem" indicador de pontos = "true" indicador-color = "rgba (0,0,0, 0,3)" autoplay = "true"  
    intervalo = "5000" duração = "1000" circular = "true " > 
    
    < bloco wx: para =" {{imageItems}}" wx: key = "* este" wx: por item = "img" > 
        < swiper item > 
            < imagem class = "swiperItem" bindtap = "imgTap" dados-link ="{{img.link}}" dados-id = "{{img.id}}" src= "{{img.imgsrc}}" modo = "aaspectFill" lazy-load = "false" >              
            </ image > 
        </ swiper item > 
    </ block > 
</ swiper > 

< texto estilo = "color: red; width: 100%; height: 50rpx" > {{info}} </ text >

 

Micro carta de quadro carrossel applet, fornece uma componentes prontos Swiper para nós.

A principal Descrição swiper propriedade:

indicador de pontos: indicador se a rotação, ou seja, abaixo do ponto

autoplay: se para reproduzir automaticamente

intervalo: cada intervalo de tempo de comutação de imagem, em milissegundos

Duração: comutação leva milissegundos

Outro uso específico, exibir o documento que, crianças.

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

A principal explicação:

bindtap é vinculativo eventos, imgTap é feito na função de resposta a incidentes de arquivo js

DATA- * * parâmetros passados ​​para o evento, que é o nome do parâmetro *, a presente concretização dois parâmetros de transmissão, link e id

OK! Carousel terminou perto! Há perguntas, comentários!

Estou preocupado, você vai ter uma melhor experiência de aprendizagem!