您的位置 首页 技术

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

小程序如何在轮播图里面实现点击跳转 轮播图可以使用swiper组件来实现,点击跳转页面可以使用navigator组件来实现,所以实现点击轮播图跳转页面的方法是:在swiper组件的…

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

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

以上就是小程序如何在轮播图里面实现点击跳转的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/54982.html

为您推荐

返回顶部