小程序如何在輪播圖里面實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)

輪播圖可以使用swiper組件來(lái)實(shí)現(xiàn)，點(diǎn)擊跳轉(zhuǎn)頁(yè)面可以使用navigator組件來(lái)實(shí)現(xiàn)，所以實(shí)現(xiàn)點(diǎn)擊輪播圖跳轉(zhuǎn)頁(yè)面的方法是：在swiper組件的swiper-item組件里嵌套一個(gè)navigator即可。

具體實(shí)現(xiàn)代碼如下：

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中文網(wǎng)，大量免費(fèi)小程序開(kāi)發(fā)教程，歡迎學(xué)習(xí)！