캐러셀 차트의 미니 프로그램에서 클릭 점프를 구현하는 방법

애플릿 내 캐러셀 차트에서 클릭 점프 구현 방법

캐러셀 차트는 swiper 컴포넌트를 이용하여, 클릭 점프 페이지는 navigator 컴포넌트를 이용하여 구현할 수 있으며, 따라서 회전식 차트를 클릭하여 페이지로 이동합니다. 방법은 다음과 같습니다. swiper 구성 요소의 swiper-item 구성 요소에 네비게이터를 중첩합니다.

구체적인 구현 코드는 다음과 같습니다:

1, WXML 코드

  <!--轮播图 -->
  <view class=&#39;swiperBanner&#39;>
    <swiper indicator-dots=&#39;{{indicatorDots}}&#39; autoplay=&#39;{{autoplay}}&#39; interval=&#39;{{interval}}&#39; duration=&#39;{{duration}}&#39; circular=&#39;{{circular}}&#39;>
      <swiper-item  wx:for="{{imgUrls}}" wx:key=&#39;{{index}}&#39;>
        <navigator url=&#39;{{item.link}}&#39;>
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"></image>
        </navigator> 
      </swiper-item>
    </swiper>
  </view>
</view>

2, WXSS 코드

/* 轮播 */
.swiperBanner{
  width:100%;
  height:420rpx !important;
  margin:0 auto; 
}
.swiperBanner image{
  width:100%;
  height:420rpx !important;
}
swiper {
  width:100%;
  height:420rpx !important;
}

3, JS 코드

indicatorDots:false,
   autoplay:true,
   interval:3000,
   duration: 800,
   circular:true,
    // 轮播图
   imgUrls: [
     {
       link:'../activity/washCar1/index/index',
       url:'https://localhost/static/ttcf/img/banner8.png',
 
     },
     {
       link: '../activity/Odysseus/index/index',
       url: 'https://localhost/static/ttcf/img/banner9.png',
 
     },
 
   ],

PHP 중국어 웹사이트, 다수의 무료 소규모 프로그램 개발 튜토리얼, 학습을 환영합니다!

위 내용은 캐러셀 차트의 미니 프로그램에서 클릭 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!