微信小程序轮播图点击跳转页面

index/wmxl代码

<!--轮播图-->

<view class='swiperBanner'>

    <swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' circular='{{circular}}'>

      <swiper-item  wx:for="{{imgUrls}}" wx:key='{{index}}'>

        <navigator url='{{item.link}}'>

          <image src="{{item.url}}" class="slide-image" mode="aspectFill"></image>

        </navigator> 

      </swiper-item>

    </swiper>

  </view>

index/wxss代码

/*轮播图*/

.swiperBanner{

  width: 100%;

  height: 350rpx;

  justify-content: center;

  align-items: center;

  display: flex;

}

.swiper {

  width: 90%;

  height: 300rpx;

}

.swiperBanner image{

  width: 100%;

  height: 300rpx;

  border-radius: 30rpx;

  border: 1px solid #8000000f;

}

index/js代码

 //轮播数据 

   Data:{

 indicatorDots:false,

    autoplay:true,

    interval:3000,

    duration: 800,

    circular:true,

     // 轮播图

    imgUrls: [

      {

        link:'../food/baozi/index',//跳转后的界面

       url:'cloud://cloud1-2gqs4wzm10617491.636c-cloud1-2gqs4wzm10617491-1310104163/swiper/roubao.png',//图片在云开发中的存储

      },

      {

        link: '../food/guoqiaomixian/index',

       url: 'cloud://cloud1-2gqs4wzm10617491.636c-cloud1-2gqs4wzm10617491-1310104163/swiper/guoqiaomixian.png',

      },

    ],

},