WeChat-Applet-Tutorial wxapp View Container Swiper

WeChat-Applet-Ansichtscontainer: Swiper

Schiebefeld

Schiebefeld

属性名	类型	默认值	说明
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}

Hinweis: Nur ​​die Swiper-Item-Komponente kann platziert werden, andere Knoten werden automatisch gelöscht

Swiper-Item

Nur ​​möglich In der Swiper-Komponente werden Breite und Höhe automatisch auf 100 % gesetzt

Beispielcode:

<swpier indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for-items="{{imgUrls}}">
 <swpier-item>
  <image src="{{item}}" class="slide-image" width="355" height="150"/>
 </swpier-item>
 </block>
</swpier>
<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
Page({
 data: {
 imgUrls: [
  &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
  &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
  &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
 ],
 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
 })
 }
})

Danke fürs Lesen, Ich hoffe, es kann allen helfen. Vielen Dank an alle für die Unterstützung dieser Website!

Weitere Artikel zum WeChat-Applet-Tutorial WXApp View Container Swiper finden Sie auf der chinesischen PHP-Website!