小程序如何在轮播图里面实现点击跳转
轮播图可以使用swiper组件来实现,点击跳转页面可以使用navigator组件来实现,所以实现点击轮播图跳转页面的方法是:在swiper组件的swiper-item组件里嵌套一个navigator即可。
具体实现代码如下:
1、WXML代码
1 2 3 4 5 6 7 8 9 10 11 | <!--轮播图 -->
<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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .swiperBanner{
width : 100% ;
height : 420 rpx !important ;
margin : 0 auto ;
}
.swiperBanner image{
width : 100% ;
height : 420 rpx !important ;
}
swiper {
width : 100% ;
height : 420 rpx !important ;
}
|
3、js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | indicatorDots: false ,
autoplay: true ,
interval:3000,
duration: 800,
circular: true ,
imgUrls: [
{
link:& #39;../activity/washCar1/index/index',
url:& #39;https://localhost/static/ttcf/img/banner8.png',
},
{
link: & #39;../activity/Odysseus/index/index',
url: & #39;https://localhost/static/ttcf/img/banner9.png',
},
],
|
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
暂时没有评论,来抢沙发吧~