WeChat 애플릿 튜토리얼 wxapp 뷰 컨테이너 스위퍼

WeChat 애플릿 보기 컨테이너: 스와이프

슬라이딩 패널

슬라이딩 패널

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

참고: swiper-item 구성 요소만 배치할 수 있으며 다른 노드는 자동으로 삭제됩니다.

swiper-item

만 가능 배치된 swiper 컴포넌트에서는 너비와 높이가 자동으로 100%로 설정됩니다

샘플 코드:

<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
 })
 }
})

읽어 주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 감사합니다. 이 사이트를 지원해 주셔서 감사합니다!

WeChat 애플릿 튜토리얼 wxapp 뷰 컨테이너 스위퍼 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!