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

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',

      },

    ],

},


文章标签:

原文连接:https://blog.csdn.net/ZLP916/article/details/123443517

相关推荐

我用了九个小时给高中同学写了一款留言板!

【小程序】快来开发你的第一个微信小游戏(详细流程)

【微信小程序】组件使用及属性参考

【微信小程序】页面导航详解

微信小程序---全局配置及页面配置

微信小程序实验案例:简易成语小词典

密码太多不知道怎么记录?不如自己写个密码箱小程序

助力乡村振兴,我为农民伯伯开发了这款微信小程序

【微信小程序】常用组件及基本使用详解

微信小程序--》你真的了解小程序组件的使用吗?

微信小程序---wxss模板样式

微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

【微信小程序】使出千手浮图—回滚式

微信小程序--》小程序简介与工具安装配置

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (上)

【微信小程序】页面配置,网络数据请求

uniapp+vue3 setup+ts 开发小程序实战(路由篇)

uniapp+vue3 setup+ts 开发小程序实战(网络请求封装篇)

《微信小程序-进阶篇》package.json版本说明及各类版本符号详解(一)

微信小程序开发学习1(小程序的入门知识)