如何在小程序轮播图中设置点击跳转功能？

本文共计392个文字，预计阅读时间需要2分钟。

小程式如何实现在轮播图里点击跳转页面？可以使用swiper组件来实现轮播图，点击跳转页面可以使用navigator组件来实现。实现点击轮播图跳转页面的方法是：在swiper组件的swiper-item组件中设置点击事件。

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

轮播图可以使用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:'localhost/static/ttcf/img/banner8.png', }, { link: '../activity/Odysseus/index/index', url: 'localhost/static/ttcf/img/banner9.png', }, ],

PHP中文网，大量免费小程序开发教程，欢迎学习！

以上就是小程序如何在轮播图里面实现点击跳转的详细内容，更多请关注自由互联其它相关文章！