Maison > Applet WeChat > Développement de mini-programmes > Comment faire défiler des images dans un petit programme

Comment faire défiler des images dans un petit programme

Libérer: 2020-03-21 14:05:36
original
4539 Les gens l'ont consulté

Comment faire défiler des images dans un petit programme

Faites glisser votre doigt vers la gauche ou la droite pour changer d'image :

<!--pages/test/test.wxml-->
<!-- 组件 -->
<swiper>
  <swiper-item wx:for="{{imgUrls}}">
    <image src=&#39;{{item}}&#39; width="335" height="150" mode=&#39;widthFix&#39; class=&#39;img&#39; />
  </swiper-item>
</swiper>
Copier après la connexion

pages/test/test.js :

// pages/test/test.js
Page({
  data: {
    imgUrls:[
      &#39;http://dl.bizhi.sogou.com/images/1440x900/2014/05/14/611368.jpg&#39;,
      &#39;http://dl.bizhi.sogou.com/images/1440x900/2013/10/19/394877.jpg&#39;,                &#39;http://img04.sogoucdn.com/app/a/100520093/ca86e620b9e623ff-d72d635343d5bade-dcf2acda7a45cb44f172db138bdf8d2d.jpg&#39;,
    ]
  },
  //事件处理函数
  toupper:function(){
    console.log("触发了toupper");
  }
})
Copier après la connexion

pages/test/test.wxss :

.img{
 width: 100%;
}
Copier après la connexion

Expérience :

composant swiper : conteneur de vue slider.

Vous pouvez ajouter l'attribut de lecture automatique au swiper pour le lire automatiquement, par exemple : autoplay="true"

La balise unique d'image est utilisée dans le composant swiper, pas la balise double (sinon une erreur sera signalée).

Recommandé : "Tutoriel de développement de mini-programmes"

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