이 글에서는 주로 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>
속성 지침은 다음과 같습니다.
| 속성 이름 | 유형 | 기본값 | 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 | 슬라이딩 애니메이션 지속 시간 |
슬라이딩 방향이 초상화 |
| verctical | boolean | false |
|
|
| bindchange | EventHandle | 현재 변경사항이 있을 때 변경 이벤트가 발생합니다. event.detail = {current: current, source: source} |
jQuery 간단한 사용자 정의 이미지 회전판 플러그인 및 사용 예
위 내용은 WeChat Xiaocheng 스위퍼 구성요소를 사용하여 이미지 캐러셀 전환 기능 구현에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
