小程序随笔12:swiper实现banner效果

swiper滑块视图容器，官方文档见：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html。

本篇小实例主要实现banner，加载网络图，自适应高度。

实现方法：
1、在小程序页面对应的.wxml文件中，添加代码：

此代码中indicator-dots表示是否显示面板指示点，indicator-color指示点颜色，indicator-active-color当前选中的指示点颜色，autoplay是否自动切换，previous-margin前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值，next-margin后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值，style="height:*px"。
特别注意：
第一：前边距，后边距，异或高度值，使用的时候都要加上单位px或rpx。
第二：此处swiper_img_height和swiper_img_width是代码中算出来的，swiper_img_width根据手机屏宽减去前后边距的值，swiper_img_height根据图片比例算出来的，只把 swiper设置适合高度图片依旧显示不正常。如若图片也显示正常，image同样要设置宽高，如上style属性。

2、在小程序页面对应的.js文件中，添加代码：

Page({
  data: {
    dot sources:[
      img:"http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png",
    },
    {
      img:"http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg",
    },
    {
      img:"http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg",
    },
    {
      img:"http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg",
    }],
    swiperPre:10,
    swiperNext:10,
    swiper_img_height:0,
    swiper_img_width:0
  },
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (result) => {
        this.data.swiper_img_width = result.windowWidth-this.data.swiperPre-this.data.swiperNext
        this.data.swiper_img_height = this.data.swiper_img_width*0.47
        this.setData({
          swiper_img_height:this.data.swiper_img_height,
          swiper_img_width:this.data.swiper_img_width
        })
      },
    })
  },
})

效果图如下：

swiper效果图

小试牛刀，随笔记录，不喜勿喷。