小程序如何在轮播图里面实现点击跳转

小程序如何在轮播图里面实现点击跳转

轮播图可以使用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中文网，大量免费小程序开发教程，欢迎学习！