Exemple de programme WeChat Mini : implémentation du code d'effets spéciaux de carrousel 3D

Cet article vous présente un exemple d'applet WeChat : le code pour implémenter les effets spéciaux du carrousel 3D. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lors de l'écriture de l'applet WeChat, j'ai écrit sur l'effet de la réalisation d'un carrousel 3D. Vous pouvez directement utiliser le composant swiper fourni avec l'applet WeChat pour y parvenir

L'effet. Le diagramme est le suivant :

1. Propriétés pertinentes du swiper

indicateurs-points S'il faut afficher de petits points, vous pouvez également le réinitialiser vous-même. Définissez si les petits points

circulaires sont connectés au glissement, ce qui permet d'obtenir un défilement infini. La distance entre

marge précédente et l'image précédente

.

marge suivante et espacement de l'image suivante

la lecture automatique réalise le défilement automatique

Ici, nous utilisons principalement circulaire pour obtenir un défilement infini, puis ajoutons l'espacement avant et arrière, puis définissons le niveau et la transparence de l'image. Définir la hauteur de l'image et du conteneur C'est presque possible

fichier wxml

<!--carousel/index.wxml-->
<swiper>
  <block>
    <swiper-item>
      <image></image>
    </swiper-item>
  </block>
</swiper>

fichier wxss

/* carousel/index.wxss */
page{
  background: #f7f7f7f7;
}
.imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
}
.item{
  height: 500rpx;
}
.itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
}
.active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
}

fichier JS

// carousel/index.js
Page({

  data: {
    currentIndex: 0
  },

  onLoad: function (options) {
  
  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})

Recommandations associées :

Exemple de développement de la fonction de graphique carrousel dans le mini programme WeChat

Exemple de partage de l'effet de graphique carrousel dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!