微信小程序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() {
    
  },
})

 踩过的坑

 按着网上的教程，给图片增加跳转链接后（如下图），图片不显示。

 

 关于此问题的文档比较少，其中一篇说，navigator   标签放在 swiper-item 标签外面，于是我就试了试，代码改成如下图：

 然后轮播图就可以正常显示了。