微信小程序02-轮播图实现与图片点击跳转-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序02-轮播图实现与图片点击跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现效果：

微信小程序点击图片跳转到另一个页面,小程序,微信小程序,小程序,轮播图

前言

在小程序01中，已经学习了如何制作底部导航栏，本节让我们一起学习如何制作轮播图，以及点击轮播图完成页面跳转。

实现过程

注：（1）前期学习，我这里用的本地的图片，后期的话，会对接后端接口，动态获取数据，前期方便学习，就暂时用的本地图片。（2）关于图片跳转地址，因为前期其他页面还没写，所以我这里跳转的是切换 Tab，如果后期数据中有返回跳转链接，可以去掉 navigator 标签中的 open-type="switchTab" 属性。

1 在 index.wxml 文件中，增加以下代码：

  <!-- 头部广告图 -->
  <swiper class="top-banner" circular="{{circular}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"  interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{images_list}}" wx:key="id">
      <navigator url="{{item.link}}" open-type="switchTab">
        <swiper-item >
            <image src="{{item.image_url}}" class="slide-image"></image>
        </swiper-item>
      </navigator>
    </block>
  </swiper>

2 在index.wxss 文件中增加轮播图的样式

.top-banner {
  width: 100%;
  height: 360rpx;
}
 
.slide-image {
  width: 100%;
  height: 100%;
}

3，在index.js 文件中增加 data 参数

Page({
  data: {
    autoplay: true,
    indicatorDots: true,
    interval: 3000,
    duration: 1200,
    circular: true, 
    images_list : [
      {
        "id": 1,
        "image_url": "../../images/banner1.jpg",
        "link": "../list/list"
      },
      {
        "id": 2,
        "image_url": "../../images/banner2.jpg",
        "link": "../mine/mine"
      },
    ],
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs',
    })
  },
  onLoad() {
    
  },
})