视图容器(swiper)

页面结构（index.wxml）

  <swiper-item wx:for="{{image}}" wx:key="index" >
    <image src="{{item.image}}" style="width: 100%;" mode="widthFix" bindtap="go" data-path="{{item.path}}" ></image>
  </swiper-item>
</swiper>

页面逻辑（index.js）

Page({

  /**
   * 页面的初始数据
   */
  data: {
    image: []
  },
  go(e) {
    let {currentTarget:{dataset:{path}}}=e
    wx.navigateTo({
      url: '/pages/linkpage/linkpage?url='+path,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.lunbo()
  },
  lunbo: function () {
    wx.request({
      url: 'https://api.apiopen.top/getWangYiNews',
      method: "POST",
      data: {
        page: '1',
        count: '5'
      },
      success: (res) => {
        let {
          data: {
            result
          }
        } = res
        console.log(result);
        this.setData({
          image: result.slice(0, 5)
        })
      },
    })
  },

其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接

    indicatgorDots 是否出现焦点

    autoplay 是否自动播放

    interval 自动播放间隔时间

    duration 滑动动画时间

☆实现的效果