Comment utiliser le composant de curseur de galerie dans le mini-programme WeChat

Cet article présente principalement en détail comment utiliser le curseur de galerie de composants de carrousel d'images du mini programme WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont pour tout le monde. Le code spécifique du composant carrousel d'images du mini programme WeChat est partagé pour votre référence. Le contenu spécifique est le suivant

Tout d'abord, le rendu :

wxml<.>

<scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore">
 <view class="swiper">
  <swiper class="swiper-box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
      indicator-color="#fff" indicator-active-color="red">
    <block wx:for-items="{{banner_url}}" wx:key="item.id">
      <navigator url="../blogList/blogList">
       <swiper-item>
        <block wx:if="{{item}}">
         <image class="imgw" src="{{item.url}}" mode="aspectFill"/>
        </block>
        <block wx:else>
         <image src="../../images/default_pic.png" mode="aspectFill"></image>
        </block>
       </swiper-item>
      </navigator>
    </block>
  </swiper>
 </view>
</scroll-view>

wxss

.imgw{width:100%;}

js

/**
 *页面的初始数据
 */
data: {
 banner_url: data.bannerList(),
 open: false,
 indicatorDots: true,//是否显示面板指示点
 autoplay: true,//是否开启自动切换
 interval: 3000,//自动切换时间间隔
 duration: 500//滑动动画时长
}

Effet final :

Résumé :

1. La fonction du composant scroll-view est de déclencher le glissement tactile

2. La fonction du composant swiper est de changer automatiquement d'image pour former un carrousel
3. La fonction du composant navigateur est d'ajouter un lien vers chaque image
utilise principalement les composants scroll-view et swiper pour créer un composant carrousel coulissant.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Diagramme de méthode interne de base d'Object en JavaScript (tutoriel graphique)

Utilisez axios pour encapsuler la méthode fetch et call

Quelles sont les différences entre Map et ForEach en JS ?

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!