<template>
  <view class="container">
    <scroll-view
      class="scroll-view"
      scroll-y="true"
      @scrolltolower="onScrollToLower"
    >
      <button @click="scrollTo">点击滚动</button>
      <view v-for="(item, index) in list" :key="index">
        {{ item }}
      </view>
    </scroll-view>
    <button @click="addItem">添加内容</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`),
    };
  },
  methods: {
    onScrollToLower() {
      console.log("滚动到底部了");
      // 可以在这里加载更多数据
    },
    addItem() {
      this.list.push(`Item ${this.list.length + 1}`);
      this.$nextTick(() => {
        this.$refs.scrollView.scrollTo({
          top: 99999,
          duration: 300,
        });
      });
    },
    scrollTo() {
      uni.pageScrollTo({
        scrollTop: 100,
        duration: 300,
      });
    },
  },
};
</script>

<style>
.container {
  height: 100%;
}
.scroll-view {
  height: 80%;
}
button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #007aff;
  color: white;
}
</style>