Maison > Applet WeChat > Développement de mini-programmes > Exemple de programme WeChat Mini : implémentation du code d'effets spéciaux de carrousel 3D

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

不言
Libérer: 2018-08-29 09:46:25
original
8535 Les gens l'ont consulté

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 :

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

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>
Copier après la connexion

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;
}
Copier après la connexion

fichier JS

// carousel/index.js
Page({

  data: {
    currentIndex: 0
  },

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal