小程序
小游戏
企业微信
微信支付
扫描小程序码分享
刚刚按照官方的指引实现了swiper的图片轮播，但是应该如何实现每张图片在点击之后都能跳转到对应的页面呢？
对于这个问题确实一下子失去了“解题思路”，还望有高手能指导一二，谢谢！~~
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
这不是很简单么<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的数据为：
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 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>
写一个事件,判断你点击的第几个,然后跳到对应页面
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
这不是很简单么<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的数据为：
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 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>写一个事件,判断你点击的第几个,然后跳到对应页面