Explication détaillée de la façon d'utiliser le curseur de la galerie des composants du carrousel d'images

小云云
Libérer: 2018-02-02 10:25:49
original
2797 Les gens l'ont consulté

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.

D'abord le rendu :

Explication détaillée de la façon dutiliser le curseur de la galerie des composants du carrousel dimages

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

wxss


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

js


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

Effet final :

Explication détaillée de la façon dutiliser le curseur de la galerie des composants du carrousel dimages

Résumé :

1. La fonction du composant scroll-view est de déclencher le glissement tactile
2 La fonction du composant swiper est de basculer automatiquement les images vers le formulaire. un carrousel
3. La fonction du composant navigateur est d'ajouter un lien vers chaque image
Principalement, les composants scroll-view et swiper sont transformés en un composant carrousel coulissant.

Recommandations associées :

Encapsulation détaillée du composant de carrousel vertical React Native

Composant de carrousel vertical du message de notification React Native Explication détaillée de l'encapsulation

Implémentation JavaScript d'un exemple de code de composant de carrousel d'images

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!