这篇文章主要介绍小程序在轮播图里面实现点击跳转的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
小程序如何在轮播图里面实现点击跳转
轮播图可以使用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',
},
],以上是“小程序在轮播图里面实现点击跳转的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
