위 챗 애플 릿 이미지 윤 방 구성 요소 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 두 구성 요 소 를 미끄럼 가능 한 라운드 구성 요소 로 만 듭 니 다.
데모 다운로드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기