So implementieren Sie Click Jump im Miniprogramm im Karusselldiagramm

So implementieren Sie Click-to-Jump im Karusselldiagramm im Applet

Das Karusselldiagramm kann mithilfe der Swiper-Komponente implementiert werden. Klicken Sie, um zur Seite zu springen. Dies kann mithilfe der Navigator-Komponente erreicht werden. Der Weg zum Klicken auf das Karusselldiagramm, um zur Seite zu springen, besteht darin, einen Navigator in der Swiper-Item-Komponente der Swiper-Komponente zu verschachteln.

Der spezifische Implementierungscode lautet wie folgt:

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-chinesische Website, eine große Anzahl kostenloser kleiner Programmentwicklung-Tutorials, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Click Jump im Miniprogramm im Karusselldiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!