How to implement click jump in mini program in carousel chart

How the applet implements click-to-jump in the carousel chart

The carousel chart can be implemented using the swiper component. Click to jump to the page. This can be achieved using the navigator component, so the way to achieve clicking on the carousel chart to jump to the page is to nest a navigator in the swiper-item component of the swiper component.

The specific implementation code is as follows:

1, WXML code

  <!--轮播图 -->
  <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 code

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

3, JS code

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 Chinese website, a large number of free small program development tutorials, welcome to learn!

The above is the detailed content of How to implement click jump in mini program in carousel chart. For more information, please follow other related articles on the PHP Chinese website!