Interpretation und Analyse der WeChat-Applet-Komponenten: 3. Swiper-Slider-Ansicht

Swiper-SchiebereglerKomponentenbeschreibung:

• Slider-Ansichtscontainer, der zum Anzeigen von Bildern verwendet wird und automatisch durch Ziehen und Festlegen von Attributen durch den Benutzer umgeschaltet werden kann Steuern Sie das Umschalten von Bildern

Das Folgende ist der WXML-Code:

[XML] Einfache Textansicht Code kopieren

[/align]
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

Das Folgende ist der JS-Code:

[JavaScript] Nur-Text-Ansicht Code kopieren

page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

[CSS] Nur-Text-Ansicht Code kopieren

.swiper-item{
    display: block;
    height: 150px;
}

Hauptattribute:

• Legen Sie den Inhaltsstil der Schnittstelle fest, der für wxml verwendet wird
  

false tr>1000

属性	类型	默认值	描述
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的 index
interval	Number	5000	自动切换时间间隔
duration	Number	1000	滑动动画时长
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current}

Attribute

Typ

Standardwert

Beschreibung

Indikatorpunkte

Boolean

false

Ob Anzeigepunkte auf dem Bedienfeld angezeigt werden sollen

Autoplay

Boolescher Wert

Ob automatisch umgeschaltet werden soll

aktuell

Nummer

0

Der Index der aktuellen Seite

Intervall

Anzahl

5000

Zeitintervall für automatische Umschaltung

Dauer

Anzahl

Gleitende Animationsdauer

Bindungsänderung

EventHandle

Das Änderungsereignis wird ausgelöst, wenn aktuelle Änderungen vorgenommen werden, event.detail = {current: current}

Das obige ist der detaillierte Inhalt vonInterpretation und Analyse der WeChat-Applet-Komponenten: 3. Swiper-Slider-Ansicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!