swiper中的图片如何逐一增加bindtap?
发布于 4 年前 作者 tao46 14399 次浏览 来自 官方Issues

刚刚按照官方的指引实现了swiper的图片轮播，但是应该如何实现每张图片在点击之后都能跳转到对应的页面呢？

对于这个问题确实一下子失去了“解题思路”，还望有高手能指导一二，谢谢！~~

5 回复

假设swiper的数据为：

list = [{id:xxx, path:’/pages/xxx/xxx’, src:‘xxxx’},{id:xxx, path:’/pages/xxx/xxx’, src:‘xxxx’},…]

借用木有鱼丸的wxml

<swiper class="index-adv-box" duration="300" circular='true' autoplay='true'>
    <swiper-item wx:for="{{list}}" class="item-w-center">
        <image class='adv-img-index' src='{{item.src}}' mode='widthFix' data-item='{{item}}' bindtap='goto'></image>
    </swiper-item>
</swiper>


goto(e){
    var item = e.currentTarget.dataset.item || {}
    if(item.path){
        wx.navigateTo({ url:item.path })
    }
}

这不是很简单么<swiper autoplay="true" interval="5000" duration="500" bindchange="swiperChange">

    <block wx:for="{{advList}}" wx:key="item">

      <swiper-item style="height: {{height}};" class="{{type==1?'padding-type1':''}} {{type==2?'padding-type2':''}}" data-type="{{item.link_type}}" data-url="{{item.link}}" data-id="{{item.id}}" bindtap="toPage">

        <image mode="aspectFill" src="{{item.image}}"></image>

      </swiper-item>

    </block>

  </swiper>

根据索引跳

这也算问题么。。。

<swiper class="index-adv-box" current='{{itemindex}}' duration="300"  circular='true' autoplay='true'
      wx:if="{{advertList.length!=0}}">
      <swiper-item wx:for="{{advertList}}" class="item-w-center">
        <image class='adv-img-index' src='{{item.AdvertisePic}}' mode='widthFix'
          data-item='{{item}}' bindtap='goAdvDetail'></image>
      </swiper-item>
    </swiper>

写一个事件,判断你点击的第几个,然后跳到对应页面

回到顶部