uni-app 中 swiper 轮播图高度自适应

在uni-app中，可以通过以下两种方法实现swiper轮播图的高度自适应：

方法一：
在swiper组件的样式中，设置高度为宽度的一定比例。具体来说，可以使用calc()函数来计算高度，公式为：swiper高度 = swiper宽度 * 原图高度 / 原图宽度。例如：

<swiper class="swiper-box" indicator-dots autoplay circular>
  <swiper-item v-for="(item, i) in imgList" :key="i">
    <image style="width: 100%" :src="item" mode="widthFix" />
  </swiper-item>
</swiper>

.swiper-box {
  width: 100%;
  height: calc(100vw * 9 / 16);
}

方法二（推荐）：
使用uni-app提供的自定义组件swiper-plus，该组件可以自动计算图片的宽高比，并根据宽度自适应高度。具体使用方法可以参考uni-app官方文档。

相关问题

unizpp中swiper如何做到各swiper-item高度自适应，每个item里面是支持上滑加载更多的分页

在uni-app中使用swiper组件时，可以通过设置swiper-item的高度为auto，来实现swiper-item高度自适应。具体的代码如下所示：

<swiper>
  <swiper-item>
    <!-- 这里的高度将自适应内容的高度 -->
  </swiper-item>
  <swiper-item>
    <!-- 这里的高度将自适应内容的高度 -->
  </swiper-item>
</swiper>

至于在swiper-item中支持上滑加载更多的分页，可以使用scroll-view组件来实现。具体的代码如下所示：

<swiper>
  <swiper-item>
    <scroll-view style="height: 100vh;">
      <!-- 这里放置需要分页加载的内容 -->
    </scroll-view>
  </swiper-item>
  <swiper-item>
    <scroll-view style="height: 100vh;">
      <!-- 这里放置需要分页加载的内容 -->
    </scroll-view>
  </swiper-item>
</swiper>

在scroll-view组件中设置高度为屏幕高度，然后在其中放置需要分页加载的内容，就可以实现上滑加载更多的分页了。当用户滑动到底部时，可以触发上滑加载更多的事件，从而实现分页加载。

uni-app框架种使用swiper 怎么动态赋值

在 uni-app 中使用 Swiper 进行动态赋值，可以通过以下步骤实现：

1. 在页面中引入 Swiper 组件，并定义数据源：

<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
  <swiper-item v-for="(item, index) in swiperList" :key="index">
    <image :src="item.imageUrl" mode="aspectFill" />
  </swiper-item>
</swiper>

在上述代码中，我们通过 `v-for` 指令循环遍历数据源 `swiperList`，并使用 `swiper-item` 组件渲染 swiper slides，其中 `item.imageUrl` 表示数据源中每个元素的图片地址。

2. 在 JavaScript 中动态赋值数据源：

export default {
  data() {
    return {
      swiperList: [], // 数据源
    };
  },
  onLoad() {
    // 动态获取数据源，假设为数组形式
    const newData = [
      {
        imageUrl: 'https://xxx.com/banner1.jpg',
      },
      {
        imageUrl: 'https://xxx.com/banner2.jpg',
      },
      {
        imageUrl: 'https://xxx.com/banner3.jpg',
      },
    ];

    // 更新数据源
    this.swiperList = newData;
  },
};

在上述代码中，我们在页面的 `onLoad` 生命周期钩子函数中动态获取数据源，并将其赋值给页面的 `swiperList` 数据属性，这样 Swiper 组件就会自动渲染新的 swiper slides。

需要注意的是，在 uni-app 中使用 Swiper 组件时，需要在 `swiper-item` 中包裹一个具有固定高度的容器，例如：

<swiper-item v-for="(item, index) in swiperList" :key="index">
  <view style="height: 200rpx;">
    <image :src="item.imageUrl" mode="aspectFill" style="height: 100%;" />
  </view>
</swiper-item>

这是因为 uni-app 中 Swiper 组件的高度是自适应的，需要一个固定高度的容器来撑开 Swiper 组件。