uniapp swiper自动轮播的时候内容高度自适应

可以使用swiper的高度自适应插件swiper-layout来实现。在swiper-item中设置需要自适应高度的元素样式为height:auto，然后在swiper-layout中设置auto-height属性为true即可。

示例代码：

<swiper-layout :auto-height="true">
  <swiper-item>
    <div class="content" style="height: auto">内容</div>
  </swiper-item>
  <swiper-item>
    <div class="content" style="height: auto">内容</div>
  </swiper-item>
</swiper-layout>

相关问题

uniapp swiper文字自动轮播的时候高度自适应

在 uniapp 中 swiper 文字自动轮播时，可以使用 `text` 组件来实现文本内容的自适应高度。具体实现步骤如下：

1. 在 `swiper` 中添加 `text` 组件，并设置 `selectable` 属性为 `true`。
2. 在 `text` 组件中添加需要展示的文本内容。
3. 在 `text` 组件上绑定 `linechange` 事件，当文本内容发生换行时触发该事件。
4. 在事件处理函数中获取 `text` 组件的实际高度，并将该值设置为 `swiper-item` 的高度。

示例代码如下：

<swiper>
  <swiper-item>
    <view>
      <text selectable="{{true}}" bindlinechange="onLineChange">这里是自适应高度的文本内容</text>
    </view>
  </swiper-item>
</swiper>

<script>
  export default {
    methods: {
      onLineChange(e) {
        uni.createSelectorQuery().in(this).select('.text').boundingClientRect(data => {
          this.$refs.swiperItem.style.height = data.height + 'px';
        }).exec();
      }
    }
  }
</script>

uniapp swiper文字自动轮播的时候内容高度自适应

可以使用 `scroll-view` 组件实现文字自动轮播，并设置 `scroll-y` 属性为 `true`，使其在垂直方向上可以滚动。同时，需要监听 `scroll-view` 的 `scrolltolower` 事件，当滚动到底部时，将文字列表的第一条数据添加到末尾，再移除第一条数据，实现循环滚动。在实现高度自适应时，可以使用 `scroll-view` 的 `bindscrolltolower` 属性配合 `dom` 方法计算内容高度，并动态设置 `scroll-view` 的高度。

示例代码如下：

<template>
  <view class="container">
    <scroll-view 
      class="swiper-list" 
      scroll-y 
      bindscrolltolower="onScrollToLower" 
      style="height: {{listHeight}}px;">
      <view wx:for="{{textList}}" wx:key="index">{{item}}</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      textList: ['这是第一段文字', '这是第二段文字', '这是第三段文字'], // 文字列表
      listHeight: 0 // scroll-view 的高度
    }
  },
  mounted() {
    this.setListHeight() // 初始化设置 scroll-view 高度
  },
  methods: {
    // 计算 scroll-view 高度
    setListHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.swiper-list').boundingClientRect(data => {
        this.listHeight = data.height
      }).exec()
    },
    // 滚动到底部时，循环添加和移除文字
    onScrollToLower() {
      const firstText = this.textList[0]
      this.textList.push(firstText)
      this.textList.splice(0, 1)
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 300rpx;
}

.swiper-list {
  width: 100%;
  overflow: hidden;
}

.swiper-list view {
  font-size: 28rpx;
  line-height: 40rpx;
  text-align: center;
}
</style>