uniapp swiper 滚到底

在 Uniapp 中，可以通过监听 swiper 的 change 事件来判断 swiper 滚动到底部。具体的实现步骤如下：

1. 在页面的 vue 文件中，给 swiper 组件绑定 change 事件：

<swiper @change="swiperChange">
  <!-- swiper 的内容 -->
</swiper>

2. 在 methods 中定义 swiperChange 方法：

methods: {
  swiperChange(e) {
    // 判断是否滚动到了最后一个 slide
    if (e.detail.current === this.swiperList.length - 1) {
      console.log('滚动到底部');
      // 执行你需要的操作
    }
  }
}

在 swiperChange 方法里，可以通过 `e.detail.current` 获取当前所在的 slide 索引，然后判断是否滚动到了最后一个 slide（即滚动到底部），如果是则执行相应的操作。

这样就可以实现在 Uniapp 中监听 swiper 滚动到底部的功能了。你可以根据需求自定义相应的操作，比如请求下一页数据或进行其他处理。

相关问题

uniapp swiper 点击当前项居中显示

要实现当前项居中显示，可以通过以下几个步骤：

1. 在 `swiper` 标签上添加 `bindchange` 事件，用来监听当前项的变化。

2. 在 `swiper` 组件中定义一个 `current` 变量，用来记录当前项的下标。

3. 在 `swiper-item` 标签上添加 `catchtap` 事件，用来监听用户点击事件。

4. 在 `catchtap` 事件中，获取当前点击项的下标，并将其赋值给 `current` 变量。

5. 在 `bindchange` 事件中，根据 `current` 变量的值计算出当前项应该居中显示的位置，并通过 `swiper` 组件的 `scrollLeft` 属性实现滚动到该位置。

以下是示例代码：

<swiper bindchange="swiperChange" current="{{ current }}">
  <swiper-item catchtap="itemClick" wx:for="{{ list }}" wx:key="{{ item.id }}">
    <!-- item content -->
  </swiper-item>
</swiper>

<script>
Page({
  data: {
    list: [
      // swiper items
    ],
    current: 0 // 当前项下标
  },

  // swiper change event
  swiperChange(e) {
    this.setData({
      current: e.detail.current
    });

    // 计算当前项居中显示的位置
    let query = wx.createSelectorQuery().in(this);
    query.select('.swiper-item').boundingClientRect((rect) => {
      let screenWidth = wx.getSystemInfoSync().windowWidth;
      let itemWidth = rect.width;
      let scrollLeft = e.detail.current * itemWidth - (screenWidth - itemWidth) / 2;
      this.setData({
        scrollLeft: scrollLeft
      });
    }).exec();
  },

  // item click event
  itemClick(e) {
    let index = e.currentTarget.dataset.index;
    this.setData({
      current: index
    });
  }
})
</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>