Petit développement du programme micro-canal (vi) la production de la boucle figure

Nous voyons souvent, contient une image de carrousel de défilement circulaire dans l'applet, c'est de savoir comment faire, cet article, je vais vous prendre pour compléter le look, cette fonction.

Regardons à des rendus terminé:

 

 

A partir des rendus, nous pouvons voir qu'il y Carousel Figure 3, cliquez sur les images de carrousel, la page en cours peut également répondre.

Tout d'abord établi dans les images racine le dossier du projet et trois images prêtes sur eux. Plus précisément, comme le montre:

 

 Code de référence spécifique:

Code de fichier js:

Page ({ 
  / * * 
   *页面的初始Métadonnées 
   * / 
  données: { 
    imageItems: [{ 
      id: 1 , 
      imgsrc: "../../images/1.png" , 
      lien: « http: // www. test.com/id=1" 
    }, { 
      id: 2 , 
      imgsrc: "../../images/2.png" , 
      lien: "http://www.test.com/id=2" 
    }, { 
      id: 15 , 
      imgsrc: "../../images/15.png" , 
      lien: "http://www.test.com/id=15" 
    }], 
    info: ""
  },
  / * Cliquez sur le gestionnaire d'événements d'image * / 
  imgTap: fonction (params) {
     / * * 
     ensemble de paramètres * params pass nom sur la 
     page * de wxml grâce à des données en - ** pass Format sur 
     * par params.currentTarget en fonction js. . ** ensemble de données moyen pour obtenir le 
     * / 
    / * * débogueur passe sur le paramètre de sortie de la console Lien * / 
    console.info (params.currentTarget.dataset.link); 
    / * * par des conseils passer l'identifiant de paramètre affiché 
     * Notez que, le titre ne peut accepter une valeur de type chaîne, puisque id est un entier, donc nous devons utiliser + « » approche de conversion en 
     * / 
    wx.showToast ({ 
      title: params.currentTarget.dataset.id + « » , 
    }) 
    / * * le montre le code suivant comment les valeurs de l'ensemble de données dynamique 
     * info régler la valeur du paramètre à passer au- dessus Lien 
    * / 
    la présente.setData ({ 
      info: params.currentTarget.dataset.link 
    }) 
  } 
})

 

 Code de fichier wxss:

.swiperItem { 
    largeur : 100% ; 
    hauteur : 500rpx ;    
}

 

Code de fichier wxml:

< Chipeur classe = "swiperItem" indicateur-points = "true" indicateur de couleur = "rgba (0,0,0, 0,3)" autoplay = "true"  
    intervalle = "5000" durée = "1000" circulaire = "true " > 
    
    < bloc WX: pour =" {{imageItems}} » WX: key = "* ce" WX: for-item = "img" > 
        < Chipeur-item > 
            < image de classe = "swiperItem" bindtap = "imgTap" data-link = »{{}} img.link » data-id = "{{img.id}}" src= "{{}} img.imgsrc" Mode = "aaspectFill" paresseux charge = "false" >              
            </ l' image > 
        </ Chipeur-item > 
    </ bloc > 
</ Chipeur > 

< texte de style = "color: red; largeur: 100%; hauteur: 50rpx » > {{info}} </ texte >

 

lettre Micro image carrousel applet, fournit un des composants prêts à nous Chipeur.

La principale Description de Chipeur:

Indicateur-points: si l'indicateur de rotation, à savoir au-dessous du point

AutoPlay: que ce soit pour jouer automatiquement

Intervalle: chaque intervalle de temps de commutation d'image, en millisecondes

durée: commutation prend millisecondes

Toute autre utilisation spécifique, voir le document il, les enfants.

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

L'explication principale:

bindtap est obligatoire des événements, imgTap se fait dans le fichier js fonction de réponse aux incidents

DATA- * * paramètres passés à l'événement, qui est le nom du paramètre *, les présents mode de réalisation deux paramètres de transmission, le lien et id

OK! Carrousel terminé près! Il y a des questions, des commentaires!

Je suis préoccupé, vous obtiendrez une meilleure expérience d'apprentissage!