通常商品的轮播图都是正方形的，当在手机端的微信小程序中展示时，自然最佳的效果就是将 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 聊聊， 查看更多联系方式
