微信小程序 swiper 组件展示正方形商品轮播图

通常商品的轮播图都是正方形的，当在手机端的微信小程序中展示时，自然最佳的效果就是将 swiper 组件的高度设定为跟手机屏幕宽度相同。

要实现宽高相同，就需要借助小程序内置的获取设备宽度的函数

wx.getSystemInfoSync().windowWidth

效果如图

实现方法

app.js

globalData: {
    window_width: wx.getSystemInfoSync().windowWidth,
}

js 逻辑

onLoad: function (options) {
    this.setData({
        window_width: app.globalData.window_width
    });

wxml 模板文件，主要是设置 swiper 的高度。

<swiper indicator-dots="true" 
    style="height: {{ window_width }}px"
    autoplay="true" interval="4000" duration="1000">
  <block wx:for="{{ product.images }}" wx:for-item="image">
    <swiper-item>
      <image src="{{ image }}" style="height: 100%; width: 100%;" />
    </swiper-item>
  </block>
</swiper>

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式