위 챗 애플 릿 이미지 윤 방 구성 요소 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%;}


/**
 *       
 */
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에 따라 라이센스가 부여됩니다.

위 챗 애플 릿 이미지 윤 방 구성 요소 gallery slider 사용 방법 상세 설명

좋은 웹페이지 즐겨찾기