Utilisez l'applet WeChat pour implémenter l'image du carrousel de bannières

angryTom
Libérer: 2020-03-10 10:25:37
avant
4838 Les gens l'ont consulté

Cet article présente l'utilisation de l'applet WeChat pour obtenir l'effet de carrousel de bannières. Il a une certaine valeur de référence. J'espère qu'il sera utile aux amis qui apprennent le développement d'applets WeChat !

Utilisez l'applet WeChat pour implémenter l'image du carrousel de bannières

Utilisez l'applet WeChat pour implémenter l'image du carrousel de bannières

Dans le travail des ingénieurs front-end, les bannières sont essentielles. Alors comment. Le mini programme dépourvu de DOM implémente-t-il le diagramme de bannière ? Tout comme d'autres frameworks encapsulent différentes méthodes de diagrammes de bannière, le mini programme encapsule également les méthodes de bannière :

Recommande d'apprendre "<.>Développement d'un mini programme"

1 : Préparation

J'utiliserai deux images, comme indiqué ci-dessous :

Utilisez lapplet WeChat pour implémenter limage du carrousel de bannièresUtilisez lapplet WeChat pour implémenter limage du carrousel de bannières

Deux : Écrivez du code xsml (c'est-à-dire html)

Si nous utilisons la balise :

Utilisez lapplet WeChat pour implémenter limage du carrousel de bannièresCes attributs nous suffisent. Afin de garder la page xsml simple, j'utilise ici une boucle for pour mettre les ressources utilisées Enter js en boucle. Et afin de permettre la liaison bidirectionnelle des données, je prévois de mettre ses valeurs d'attribut​​dans js pour la configuration. Mon code xsml est le suivant : Utilisez lapplet WeChat pour implémenter limage du carrousel de bannières

<swiper indicator-dots="{{indicatorDots}}" 
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true"> 
      <block wx:for="{{arr}}"> 
        <swiper-item> 
            <image src="{{item}}" class="slide-image" width="355" height="150"/> 
        </swiper-item> 
      </block> 
</swiper>
Copier après la connexion

Trois : configuration js

Puisqu'il s'agit d'une liaison bidirectionnelle, il nous suffit de configurer les paramètres requis dans js. Puisque mes deux images utilisent 1.jpg et 2.jpg, je n'ai besoin que d'effectuer une petite boucle en js. Cela dépend de la situation. Vous pouvez également mettre l'adresse de l'image directement dans le tableau. changement final, sinon cela n'aura aucun effet. Le code js est le suivant :


Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    mode:"scaleToFill",
    arr:[],
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 1000,
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var array = this.data.arr
    for (let i = 1; i < 3; i++) {
      array.push("img/" + i + ".jpg")
    }
    this.setData({ arr: array})
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
       
      
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
 
})
Copier après la connexion

D'accord, regardons l'effet final :

Utilisez lapplet WeChat pour implémenter limage du carrousel de bannières

Certains petits détails nécessitent encore que vous ajustiez vous-même le code xsss.


Pour plus de tutoriels connexes, veuillez faire attention au

Site Web PHP chinois !

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:cnblogs.com
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