Heim > WeChat-Applet > Mini-Programmentwicklung > Ausführliche Erklärung zur Verwendung des Galerie-Schiebereglers der Bildkarussell-Komponente

Ausführliche Erklärung zur Verwendung des Galerie-Schiebereglers der Bildkarussell-Komponente

小云云
Freigeben: 2018-02-02 10:25:49
Original
2870 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung des WeChat-Applet-Bildkarussell-Komponenten-Schiebereglers vor. Ich hoffe, er kann jedem helfen.

Zuerst das Rendering:

Ausführliche Erklärung zur Verwendung des Galerie-Schiebereglers der Bildkarussell-Komponente

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>
Nach dem Login kopieren

wxss


.imgw{width:100%;}
Nach dem Login kopieren

js


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

Endeffekt:

Ausführliche Erklärung zur Verwendung des Galerie-Schiebereglers der Bildkarussell-Komponente

Zusammenfassung:

1. Die Funktion der Scroll-View-Komponente besteht darin, das Schieben durch Berührung auszulösen.
2. Die Funktion der Swiper-Komponente besteht darin, Bilder automatisch in Form zu bringen ein Karussell
3. Die Funktion der Navigatorkomponente besteht darin, zu jedem Bild einen Link hinzuzufügen
Hauptsächlich werden die Scroll-View- und Swiper-Komponenten in eine verschiebbare Karussellkomponente umgewandelt.

Verwandte Empfehlungen:

Detaillierte Kapselung der vertikalen Karussellkomponente von React Native

Vertikale Karussellkomponente mit Benachrichtigungsmeldung von React Native Detaillierte Erläuterung der Verpackung

JavaScript-Implementierung eines Codebeispiels für eine Bildkarussellkomponente

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des Galerie-Schiebereglers der Bildkarussell-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage