Airfly的微信小程序图片滚动 swiper 实操

网上有不少文章提到微信小程序中滚动 swiper 组件的比例适应,有些可能是碰巧,因而你可能发现,怎么他们觉得OK的代码,到了你手上就不OK了呢?我们来看看 Airfly 是怎么做的。

目前 swiper 组件只能通过 style 来真实的控制,其中要点,当然是 width 和 height 这两个节点来实现的。

我们先来看看页面布局(.wxml)文件中,本例中 swiper 目的是显示一组尺寸相同的滚动图片:

<view class=”container”>
    <swiper style=”width:{{bannerWidth}}px; height:{{bannerHeight}}px” indicator-dots=”true” autoplay=”true” interval=”2000″ duration=”500″>
      <block wx:for=”{{banner}}” wx:key=”*this”>
        <swiper-item>
          <view class=”swiper-item {{item}}” style=”width:{{bannerWidth}}px; height:{{bannerHeight}}px”>
            <image  style=”width:{{bannerWidth}}px; height:{{bannerHeight}}px” mode=”aspectFit” src=”/image/banner-{{item}}.jpg”></image>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>

好了,假设小程序页面运行时,滚动图片实际上按宽:bannerWidth 和 高:bannerHeight 来展示,我们现在的任务是,把这个实际的宽、高尺寸数据算出来就完成了。

如果你要显示的图片宽、高比例不统一,并且想在展示图片的时候不变形,那需要为每一个图片展示计算对应的屏幕宽、高。可以考虑在图片加载完成时,先获得图片的实际尺寸,计算出宽、高比例后,进一步计算出显示时的宽、高即可。

计算代码当然是要写在在脚本(.js)文件中的,本例代码如下:

onLoad: function (option) {
    thisPage = this
    wx.getSystemInfo({
      success: function (res) {
        thisPage.setData({
          bannerHeight: Math.round(res.windowWidth * 400 / 720),  // 720X400 是图片原尺寸
          bannerWidth: res.windowWidth
        });
      }
    });
  },

我们使用 wx.getSystemInfo() 来获取当前手机一些信息,包括屏幕尺寸等,如果 getSystemInfo() 不正常工作怎么办?最简单的做法,就是在脚本(.js)文件的页面数据(data)部分设置一些默认的值备用。

data: {
    bannerHeight: 356,
    bannerWidth: 640,
    banner: [’01’, ’02’, ’03’,’04’, ’05’, ’06’, ’07’],
  },

好了,图片能够在拥有有不同尺寸屏幕的微信中正常显示了。