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

이 글에서는 주로 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}

웹 페이지 구현 방법 js Play를 사용한 그림 휠

JQuery 이미지 회전판 효과 구현 예

jQuery 간단한 사용자 정의 이미지 회전판 플러그인 및 사용 예

위 내용은 WeChat Xiaocheng 스위퍼 구성요소를 사용하여 이미지 캐러셀 전환 기능 구현에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!