WeChat Xiaocheng 스위퍼 구성요소를 사용하여 이미지 캐러셀 전환 기능 구현에 대한 튜토리얼-미니 프로그램 개발-php.cn

WeChat Xiaocheng 스위퍼 구성요소를 사용하여 이미지 캐러셀 전환 기능 구현에 대한 튜토리얼

小云云

풀어 주다： 2017-12-13 09:35:13

원래의

3385명이 탐색했습니다.

이 글에서는 주로 WeChat Xiaocheng의 swiper 구성 요소 사용을 소개하고 swiper 구성 요소의 관련 속성 사용에 대해 설명합니다.

1. 효과 표시

2. 키 코드

index.wxml:

<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;">
 <swiper-item>
 <image src="../../pages/images/img1.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img2.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img3.png" style="display: block;height: 300px;"/>
 </swiper-item>
</swiper>

로그인 후 복사

속성 지침은 다음과 같습니다.

vercticalbooleanfalse이든

속성 이름	유형	기본값	Description	최소 버전
indicator-dots	Boolean	false	패널 표시 점 표시 여부
indicator-color	Color	rgba(0, 0, 0, .3)	indicator color	1.1.0
indicator-active-color	Color	#0 00000	현재 선택된 표시점 색상	1.1.0
autoplay	Boolean	false	자동 전환 여부
current	Number	0	현재 페이지 색인
interval	Number	5000	시간 간격 자동 전환
duration	Number	500	슬라이딩 애니메이션 지속 시간	슬라이딩 방향이 초상화

bindchange	EventHandle		현재 변경사항이 있을 때 변경 이벤트가 발생합니다. event.detail = {current: current, source: source}