Die WeChat-Applet-Swiper-Komponente erstellt die Codefreigabe für Karusselldiagramme

小云云
Freigeben: 2018-02-07 14:03:37
Original
3164 Leute haben es durchsucht

In diesem Artikel werden Ihnen hauptsächlich relevante Informationen zum Beispiel zum Erstellen eines Karusselldiagramms mithilfe der Swiper-Komponente des WeChat-Applets vorgestellt. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht oder wenden Sie sich zur Diskussion an die Community dieser Website Wer es braucht, kann sich darauf beziehen. Ich hoffe, es kann jedem helfen.

Ein Beispiel für die Erstellung eines Karusselldiagramms für WeChat-Miniprogramm-Swiper-Komponenten

Implementierungsrendering:

WXML-Basisdatei:


<view class="classname">
  <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red">
    <swiper-item><image src="/images/1.jpg"></image></swiper-item>
    <swiper-item><image src="/images/2.jpg"></image></swiper-item>
    <swiper-item><image src="/images/3.jpg"></image></swiper-item>
  </swiper> 
</view>
Nach dem Login kopieren


swiper-item仅可放置在组件中,宽高自动设置为100%。 
参数设置: 
autoplay 自动播放导致swiper变化; 
touch 用户划动引起swiper变化; 
indicator-dots true是否显示面板指示点圆圈; 
interval 自动切换时间间隔; 
duration 滑动动画时长; 
更多设置可以看官方文档组件!
Nach dem Login kopieren

WXSS-Stildatei


swiper{
 width:100%;
 height:500rpx;
}
swiper image{
  width:100%;
 height:500rpx;
}
Nach dem Login kopieren

app.json-Dateieintrag


{
 "pages": [
  "pages/redirect/redirect"  
 ],
 "window": {
  "navigationBarBackgroundColor": "#405f80"
 }
}
Nach dem Login kopieren

Verwandte Empfehlungen:

Tutorial zur Implementierung der Bildkarussell-Umschaltfunktion mit der WeChat-Applet-Swiper-Komponente

Zusammenfassung der Punkte, die Sie zur Swiper-Komponente beachten sollten

So verwenden Sie die Swiper-Komponente, um den Bildwechsel in einem kleinen Programm zu implementieren

Das obige ist der detaillierte Inhalt vonDie WeChat-Applet-Swiper-Komponente erstellt die Codefreigabe für Karusselldiagramme. 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