위 챗 애플 릿 이미지 윤 방 구성 요소 gallery slider 사용 방법 상세 설명
선행 효과 도:
wxml
<scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore">
<view class="swiper">
<swiper class="swiper-box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
indicator-color="#fff" indicator-active-color="red">
<block wx:for-items="{{banner_url}}" wx:key="item.id">
<navigator url="../blogList/blogList">
<swiper-item>
<block wx:if="{{item}}">
<image class="imgw" src="{{item.url}}" mode="aspectFill"/>
</block>
<block wx:else>
<image src="../../images/default_pic.png" mode="aspectFill"></image>
</block>
</swiper-item>
</navigator>
</block>
</swiper>
</view>
</scroll-view>
wxss
.imgw{width:100%;}
js
/**
*
*/
data: {
banner_url: data.bannerList(),
open: false,
indicatorDots: true,//
autoplay: true,//
interval: 3000,//
duration: 500//
}
최종 효과:요약:
1.scroll-view 구성 요소 의 역할 은 터치 슬라이딩 을 촉발 할 수 있 습 니 다.
2.swiper 구성 요소 의 역할 은 그림 을 만 들 때 자동 으로 전환 하여 윤 방 을 형성 하 는 것 이다.
3.navigator 구성 요소 의 역할 은 그림 마다 링크 를 추가 하 는 것 입 니 다.
주로 scroll-view 와 swiper 두 구성 요 소 를 미끄럼 가능 한 라운드 구성 요소 로 만 듭 니 다.
데모 다운로드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.