玩转小程序swiper自适应高度：让你的页面更吸睛

2022-12-03 16:47:42

小程序 SWIPER 自适应高度：全面指南

引言

在小程序开发中，SWIPER 组件是展示图片轮播、商品列表等内容的强大工具。然而，在实际应用中，设置 SWIPER 高度以适应其内容高度通常会成为一个难题。本文将提供全面的指南，介绍小程序 SWIPER 自适应高度的技巧，助力您开发出美观实用的应用程序。

获取屏幕高度

第一步，获取设备屏幕高度至关重要。小程序提供了 wx.getSystemInfoSync() 方法，可用于获取有关设备屏幕的信息。以下代码示例展示了如何获取屏幕高度：

const systemInfo = wx.getSystemInfoSync();
const screenHeight = systemInfo.screenHeight;

设置 SWIPER 高度

获取屏幕高度后，即可设置 SWIPER 高度以填满屏幕。通过设置 height 属性，您可以指定 SWIPER 占据的空间。以下代码段演示了如何实现：

this.setData({
  swiperHeight: screenHeight
});

设置 SWIPER-ITEM 高度

最后，需要设置每个 SWIPER 子项（即 SWIPER-ITEM）的高度。同样，通过 height 属性，您可以确保 SWIPER-ITEM 垂直填充 SWIPER 空间。以下代码示例展示了如何实现：

<swiper-item style="height: {{swiperHeight}}px;"></swiper-item>

示例代码

以下示例代码将上述概念结合在一起，创建了一个自适应高度的 SWIPER：

<swiper style="height: {{swiperHeight}}px;">
  <swiper-item>
    <image src="https://www.example.com/image1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://www.example.com/image2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://www.example.com/image3.jpg"></image>
  </swiper-item>
</swiper>

Page({
  data: {
    swiperHeight: 0
  },
  onLoad() {
    const systemInfo = wx.getSystemInfoSync();
    const screenHeight = systemInfo.screenHeight;
    this.setData({
      swiperHeight: screenHeight
    });
  }
});