小程序如何在輪播圖里面實現點擊跳轉

小程序如何在輪播圖里面實現點擊跳轉

輪播圖可以使用swiper組件來實現，點擊跳轉頁面可以使用navigator組件來實現，所以實現點擊輪播圖跳轉頁面的方法是：在swiper組件的swiper-item組件里嵌套一個navigator即可。

具體實現代碼如下：

1、WXML代碼

  <!--輪播圖 -->   <view class='swiperBanner'>     <swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' circular='{{circular}}'>       <swiper-item  wx:for="{{imgUrls}}" wx:key='{{index}}'>         <navigator url='{{item.link}}'>           <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中文網，大量免費小程序開發教程，歡迎學習！