오늘 얼마나 효과 회전 목마 그림을 달성하는 작은 마이크로 채널 응용 프로그램 개발에 대한 기록. 말 수가 적은 사람이 직접 코드에 말했다 :
<!-- 1. 首页轮播图 -->
<view>
<swiper class="my-swiper"
autoplay="true"
indicator-dots="true"
indicator-active-color="#fff"
circular="true">
<block wx:for="{{imgUrls}}">
<swiper-item class="sw-img">
<image src="{{item}}" mode="widthFix"></image>
</swiper-item>
</block>
</swiper>
</view>
회전 많은 속성이 흔히 일반적으로 사용되는 다음,가, swiper 어셈블리를 사용합니다 :
- 자동 재생 = "true"로 : 설정 자동 실행
- 표시-점 = "진정한는"포인트 디스플레이 패널 있는지 여부를 나타냅니다
- 표시기 - 액티브 색상 = "#의 FFF는"현재 선택된 컬러 포인트를 나타낸다
- 원형 = "참"슬라이딩 어댑터를 사용할지
- 간격 : 자동 전환 시간 간격 기본 5000ms
JS 데이터 내부 :
Page({
data: {
imgUrls: ["https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/3c5e6138079dc63ebe3688afff0a63b0fb56fbe1702bb754e33c4ca874b872ced8df2f995cd0d7ae9ce9db487f8f90a7?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=Natural.png&size=750",
"https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/4e5e95cc21cb5e2b2f5ecfdc0f7406dbc731207642cda81a9b880c79c4ee624fc37b5d4548d8cad8f7c2ec585bef9c85?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=DSC_0026.JPG&size=750",
'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/6283d77c69833853929662a4e86f089ec4570433af79a4ab614dd90d05f2cd6c5ab142f2df15172714a76bdced89d82f?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=DSC_0061.JPG&size=750',
'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/55d0ac2a67bb6d57a343a61070ea23de0457a536ebe9415e1b39ec8c3c6b3fe343b70f1a1a1c211d3c04e97d5d1c30be?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=DSC_0059.JPG&size=750',
'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/0d2bf2e9fdd34a7167b65750b3d808acda73ff0541f78d288bd636a723bf51bdbe191aa297de4d1bd72a427bb9ca6f41?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=DSC_0058.JPG&size=750'
]
},