vue实现滑动加载数据

上代码

使用了vant框架

所以大家自己去下载一下

这个组件

<template>

  <div>

    <van-tabs v-model="active">

      <van-tab>

        <div slot="title">

          <van-icon name="more-o" />评论专区

        </div>

        <textarea placeholder="请输入评论" rows="5" maxlength="50"></textarea>

        <van-button type="primary" size="large">发送评论</van-button>

      </van-tab>

    </van-tabs>

      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

      <van-panel

          title="评论"

          :desc="item.user_name"

          :status="item.add_time"

          v-for="item in comments"

          :key="item.add_time"

        >

          <div>{{item.content === '' || item.content === 'undefined' ? '此用户很懒,什么都没说。': item.content}}</div>

          <div slot="footer">

            <van-button size="small" icon="arrow-up">赞</van-button>

            <van-button size="small" type="danger" icon="arrow-down">踩</van-button>

          </div>

        </van-panel>

      <!-- <van-button  type="danger" text="加载更多" size="large" @click="getMore" /> -->

      </van-list>

  </div>

</template>

<script>

import { Notify } from "vant";

export default {

  data() {

    return {

      list: [],

      loading: false,

      finished: false,

      pageindex: 1,

      comments: []

    };

  },

  created() {

    this.getComments();

  },

  methods: {

    onLoad() {

      // 异步更新数据

      setTimeout(() => {

        // 异步滑动加载数据

        this.getMore()

        // 加载状态结束

        this.loading = false;

        if (this.comments.length >= 80) {

          this.finished = true;

        }

      }, 500);

    },

    getComments() {

      this.$http

        .get("api/getcomments/" + this.id + "?pageindex=" + this.pageindex)

        .then(result => {

          if (result.body.status === 0) {

            // this.comments = result.body.message;

            // 不替换老数据

            this.comments = this.comments.concat(result.body.message)

          } else {

            Notify({

              duration: 2000,

              message: "获取评论内容失败,请通知管理员!",

              background: "red"

            });

          }

        });

    },

    getMore() {

      this.pageindex++;

      this.getComments();

    }

  },

  props: ["id"]

};

</script>

<style>

.van-tabs__line {

  width: 100% !important;

}

.van-button--primary {

  background-color: #84c225;

  border: #84c225;

}

.van-panel__content {

  margin-left: 17px;

}

.van-cell:not(:last-child)::after {

  left: 0px;

}

</style>

干脆把整页代码都给你们好了 api记得替换 我是全局api