图片轮播+点击跳转不同页面（给初学者）

在qq群内有个群友问点击不同轮播图片跳转到不同页面的这个功能怎么写？

首先微信官方给出一个轮播图的事例 地址

wxml：

   <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>

js：

Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },
})

完成点击图片跳转功能 ，也就是说在这个基础上添加一个点击事件，并且要有一个对一个图片的路径。原先的代码是直接显示轮播图片的，现在是用背景了。那么先把代码改成显示图片

wxml：

 <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgArr}}" wx:key="*this">
        <swiper-item>
             <images url="{{item}}">
        </swiper-item>
      </block>
  </swiper>

js:

Page({
  data: {
    imgArr: [
'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg', 
'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg'
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },
})

图片轮播做完了，那么该添加点击事件了，在images上添加一个 bindtap=“OnJump” 事件 ，有事件了，还需要跳转的路径，那么应该在图片数组内进行绑定了，一个图片对应一个路径。然后通过点击一个图片来获取相对一个的跳转地址。 

思路说完了，我直接上代码了

wxml：

 <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgArr}}" wx:key="*this">
        <swiper-item>
<!-- data-url 为imgArr中图片对应的url地址 -->
             <images url="{{item.images}}" bindtap="OnJump" data-url="item.url">
        </swiper-item>
      </block>
  </swiper>

js: 

Page({
  data: {
    imgArr: [
{                  images:'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg', 
url:'/paegs/index1/index1'
},
{                  images:'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg', 
url:'/paegs/index1/index1'
},
{                  images:'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg', 
url:'/paegs/index1/index1'
},
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },
    OnJump:function(e){ //点击图片触发的事件
        console.log(e)    // 查看标签上的属性
        var url = e.currentTarget.dataset.url // 取出标签上绑定的 url
        wx.navigateTo({ // 不关闭当前页面，跳转到非tarber页面
          url: url,
        })
    }
})

 

关于跳转方式推荐这篇文章  小程序跳转