程序轮播图中实现点击跳转的操作办法与技巧

why 401 2024-07-22

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

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

轮播图可以使用swiper组件来实现,点击跳转页面可以使用navigator组件来实现,所以实现点击轮播图跳转页面的方法是:在swiper组件的swiper-item组件里嵌套一个navigator即可。

具体实现代码如下:

1、WXML代码

1

2

3

4

5

6

7

8

9

10

11

  <!--轮播图 -->

  <view class=&#39;swiperBanner&#39;>

    <swiper indicator-dots=&#39;{{indicatorDots}}&#39; autoplay=&#39;{{autoplay}}&#39; interval=&#39;{{interval}}&#39; duration=&#39;{{duration}}&#39; circular=&#39;{{circular}}&#39;>

      <swiper-item  wx:for="{{imgUrls}}" wx:key=&#39;{{index}}&#39;>

        <navigator url=&#39;{{item.link}}&#39;>

          <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:420rpx !important;

  margin:0 auto;

}

.swiperBanner image{

  width:100%;

  height:420rpx !important;

}

swiper {

  width:100%;

  height:420rpx !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&#39;,

       url:&#39;https://localhost/static/ttcf/img/banner8.png&#39;,

  

     },

     {

       link: &#39;../activity/Odysseus/index/index&#39;,

       url: &#39;https://localhost/static/ttcf/img/banner9.png&#39;,

  

     },

  

   ],

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小程序调用本地接口的方法与关键要点探讨
下一篇:小程序闪退问题的修复策略与有效措施
相关文章

 发表评论

暂时没有评论,来抢沙发吧~