Interprétation et analyse des composants de l'applet WeChat : 3. vue du curseur de balayage

curseur de balayageDescription du composant :

• Conteneur de vue de curseur, utilisé pour afficher des images, qui peuvent être automatiquement commutées par l'utilisateur en faisant glisser et en définissant des attributs contrôler la commutation des images

Ce qui suit est le code WXML :

[XML]

Vue en texte brut Copier le code

[/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

Ce qui suit est le code JS :

[JavaScript]

Affichage en texte brut Copier le code

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]

Vue en texte brut Copier le code

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

Attributs principaux :

• Définir le style de contenu de l'interface, utilisé pour wxml

  
  

false tr>EventHandle
Attributs

属性	类型	默认值	描述
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}

Type

Valeur par défaut

Description

indicateur-points

Booléen

faux

S'il faut afficher les points indicateurs du panneau

lecture automatique

Booléen

S'il faut basculer automatiquement

actuel

Numéro

0

L'index de la page actuelle

intervalle

Nombre

5000

Intervalle de commutation automatique

durée

Nombre

1000

Durée de l'animation coulissante

bindchange

L'événement de changement sera déclenché lorsque le courant change, event.detail = {current: current}

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!