Uniapp 滚动到底部的多种实现方式

在 Uniapp 中，需要滚动到底部的场景比较常见，比如聊天界面、下拉加载更多等。以下是几种实现方式：

1. 使用 scroll-view 组件

scroll-view 组件是 Uniapp 中提供的滚动容器组件，通过设置 scroll-into-view 属性可以实现滚动到指定元素。

<template>
  <div class="container">
    <scroll-view class="content" scroll-into-view="{{scrollIntoView}}" scroll-y="true">
      <div class="message" v-for="(item, index) in messages" :key="index">{{item}}</div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      scrollIntoView: ''
    }
  },
  methods: {
    // 添加聊天记录
    addMessage(message) {
      this.messages.push(message)
      // 滚动到最新的聊天记录
      this.scrollIntoView = `message-${this.messages.length - 1}`
    }
  }
}
</script>

上面代码中，scrollIntoView 属性的值为 message-${this.messages.length - 1}，表示滚动到最新的聊天记录。在添加聊天记录时，通过设置 scrollIntoView 属性，实现滚动到底部。

2. 使用 pageScrollTo 方法

Uniapp 提供了 pageScrollTo 方法，可以实现页面的滚动。

<template>
  <div class="container">
    <div class="content" ref="content">
      <div class="message" v-for="(item, index) in messages" :key="index">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: []
    }
  },
  methods: {
    // 添加聊天记录
    addMessage(message) {
      this.messages.push(message)
      // 滚动到底部
      this.$nextTick(() => {
        uni.pageScrollTo({
          scrollTop: this.$refs.content.scrollHeight,
          duration: 0
        })
      })
    }
  }
}
</script>

上面代码中，通过 $refs 获取到 content 元素，然后在添加聊天记录后，使用 pageScrollTo 方法滚动到底部。

3. 使用 scrollTop 属性

在 Uniapp 中，可以通过设置 scrollTop 属性实现滚动。

<template>
  <div class="container">
    <div class="content" ref="content" :style="{scrollTop: scrollTop + 'px'}">
      <div class="message" v-for="(item, index) in messages" :key="index">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      scrollTop: 0
    }
  },
  methods: {
    // 添加聊天记录
    addMessage(message) {
      this.messages.push(message)
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollTop = this.$refs.content.scrollHeight
      })
    }
  }
}
</script>

上面代码中，通过设置 content 元素的 scrollTop 属性，实现滚动到底部。在添加聊天记录后，使用 $nextTick 方法等待页面渲染完成后，再设置 scrollTop 属性。

4. 使用 CSS3 动画

使用 CSS3 中的动画实现滚动也是一种方法。

<template>
  <div class="container">
    <div class="content" ref="content">
      <div class="message" v-for="(item, index) in messages" :key="index">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: []
    }
  },
  methods: {
    // 添加聊天记录
    addMessage(message) {
      this.messages.push(message)
      // 滚动到底部
      this.$nextTick(() => {
        const content = this.$refs.content
        content.style.animation = 'scroll-bottom 0.5s ease-out forwards'
        content.scrollTop = content.scrollHeight
      })
    }
  }
}
</script>

<style>
@keyframes scroll-bottom {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 100vh));
  }
}
</style>

上面代码中，通过设置 content 元素的 animation 属性和 scrollTop 属性，实现滚动到底部。

以上是 Uniapp 滚动到底部的几种实现方式，可以根据实际场景选择适合的方法。