uni-app h5数据列表初始化8条数据滑动到底部加载数据

可以按照以下步骤实现：

1. 在页面的data中定义一个数组，用来存储列表数据，比如命名为list。

2. 在页面的onLoad生命周期函数中，初始化8条数据并放入list数组中。

3. 在页面的onReachBottom生命周期函数中，监听页面滑动到底部的事件，当滑动到底部时，调用一个自定义的函数loadMoreData()。

4. 在loadMoreData()函数中，向后端请求获取更多的数据，获取成功后将数据放入list数组中，再更新页面的数据。

下面是一个简单的示例代码：

<template>
  <scroll-view scroll-y="true" @scrolltolower="loadMoreData">
    <view v-for="(item, index) in list" :key="index">{{ item }}</view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 初始化为空数组
    };
  },
  onLoad() {
    // 初始化8条数据
    for (let i = 0; i < 8; i++) {
      this.list.push(`第${i + 1}条数据`);
    }
  },
  methods: {
    loadMoreData() {
      // 向后端请求获取更多的数据
      // ...
      // 获取成功后将数据放入list数组中，并更新页面的数据
      for (let i = 0; i < 8; i++) {
        this.list.push(`第${this.list.length + 1}条数据`);
      }
    },
  },
};
</script>

在上面的代码中，scroll-view组件用来实现页面的滑动效果，@scrolltolower事件用来监听滑动到底部的事件。在loadMoreData()函数中，可以通过向后端请求获取更多的数据来实现加载更多的功能。注意，在实际开发中，需要根据具体的业务需求来实现loadMoreData()函数中的具体逻辑。