博客

我想实现的功能就是，点击首页的轮播图的不同图片，跳转到指定的页面。

点击轮播图的新用户专享图片跳转到新用户活动页面。

最开始我是想通过点击获取轮播图的下标，根据下标判断跳转到相应的页面，但是试了好久并没与获取到。所以最后利用data-url获得图片的路径来判断跳转。这是我目前使用的方法肯定有不足之处，之后有好的方法再补充，以实现效果为先。

1.index.wxml的轮播图关键代码

 <swiper-item>
            <image src="{{item}}" class="slider-image" mode="scaleToFill"  bindtap="index_swiper_tap" data-url="  {{item}}"/>
          </swiper-item>

轮播图部分的完整代码如下

<!--滚动视图-->
  <scroll-view scroll-y="true" bindscroll="scrollChangeBgColor" class="scroll-view" bindscrolltolower="scrollBottom" >
    <!--滚动banner-->
    <view class="section slider">
      <!--滑块视图-->
      <swiper indicator-dots="true" autoplay="true" interval="3000">
        <block wx:key="1" wx:for="{{imgUrls}}">
          <swiper-item>
            <image src="{{item}}" class="slider-image" mode="scaleToFill"  bindtap="index_swiper_tap" data-url="{{item}}"/>
          </swiper-item>
        </block>
      </swiper>
    </view>

2.js部分代码

index_swiper_tap: function (e)  {
    var url=e.currentTarget.dataset.url
    if (url ==/static/images/Wheel/newuser.jpg){
      wx.navigateTo({
        url: '/pages/newusergoods/newusergoods',//注意路径前面加了一个斜杆不加不能跳转
      })
    }

关于小程序开发swiper组件如何实现点击图片自定义跳转推荐下面这个文章：


swiper组件自定义跳转