vue3+ts 评论模块 加载更多 完整流程

  <a-list item-layout="horizontal" :data-source="dataList"
          class="demo-loadmore-list"
          :loading="loading"
  >
    <template #loadMore>
      <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
        <a-button @click="loadMore" v-show="loadDis">加载更多</a-button>
        <div v-show="!loadDis">------全部加载完成-------</div>
      </div>
    </template>
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta
            :description="item.userComent"
        >
          <template #title>
            <a href="https://www.antdv.com/">{{ item.username }}</a>
          </template>
          <template #avatar>
            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>

  dataList:any = [];
  listLength = 0
  pp = {
    videoId:1,
    lim: 5
  }
  loadDis = true
  mounted() {
    this.getUserConment()
  }

  async getUserConment() {
    const data = await api.getConment(this.pp)
    this.dataList = data.info
    this.listLength = data.total
    if (this.pp.lim < this.listLength) {
      this.pp.lim +=5
    } else {
      this.pp.lim = this.listLength
      this.loadDis = false
    }
    console.log(this.pp.lim)
  }

  loadMore() {
    this.getUserConment()
  }

php

 public function getConmnet(Request $request) {
        $videoId = $request->param('videoId');
        $lim = $request->param('lim');
        $info =  Db::name('aqd_coment')->where('videoId',$videoId)->limit($lim)->select();
        $total = Db::name('aqd_coment')->where('videoId',$videoId)->count();
        $res = [
            'info' => $info,
            'total' => $total
        ];
        if ($info) {
            return json(['code'=>200,'msg'=>'inset success','data'=>$res]);
        } else {
            return json(['code'=>0,'msg'=>'no success']);
        }

    }

思路：

通过获videoID取评论数，传入每次加载获取多少条数据，前端获取数据的时候产看是否为最大值，如果是，直接传入最大值，隐藏加载更多按钮，给出提示全部加载完成，前提是你先去评论，传入videoID，username，userConmont, timeNow,保存到数据库中，查询即可，整个流程更新中

---

 

<a-comment>
      <template #avatar>
        <a-avatar
            src="https://static.hdslb.com/images/member/noface.gif"
            alt="Han Solo"
            style="margin-top: 40px;"
        />
      </template>
      <template #content>
        <a-form-item>
          <a-textarea :rows="4" v-model:value="value" showCount :maxlength="10"
          />
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
            发表评论
          </a-button>
        </a-form-item>
      </template>
    </a-comment>
    <a-list item-layout="horizontal" :data-source="dataList"
            class="demo-loadmore-list"
            :loading="loading"
            v-if="dataList.length"
    >
      <template #loadMore>
        <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
          <a-button @click="loadMore" v-show="loadDis">加载更多</a-button>
          <div v-show="!loadDis">------全部加载完成-------</div>
        </div>
      </template>
      <template #renderItem="{ item }">
        <a-list-item>
          <a-comment>
            <template #actions>
                <span key="comment-basic-like">
                <a-tooltip title="Like">
              <template v-if="action === 'liked'">
                <LikeFilled @click="like" />
              </template>
              <template v-else>
                <LikeOutlined @click="like" />
              </template>
            </a-tooltip>
            <span style="padding-left: 8px; cursor: auto">
              {{ item.userup }}
            </span>
          </span>
              <span key="comment-basic-dislike">
                  <a-tooltip title="Dislike">
                    <template v-if="action === 'disliked'">
                      <DislikeFilled @click="dislike" />
                    </template>
                    <template v-else>
                      <DislikeOutlined @click="dislike" />
                    </template>
                  </a-tooltip>
                  <span style="padding-left: 8px; cursor: auto">
                    {{ item.userdown }}
                  </span>
                </span>
              <span key="comment-basic-reply-to">回复</span>
            </template>
            <template #author><a>{{item.username}}</a></template>
            <template #avatar>
              <a-avatar
                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  alt="Han Solo"
              />
            </template>
            <template #content>
              <p>
                {{item.content}}
              </p>
            </template>
            <template #datetime>
              <a-tooltip :title="item.datetime">
                <span>{{item.datetime}}</span>
              </a-tooltip>
            </template>
          </a-comment>
        </a-list-item>
      </template>
    </a-list>

 dataList:any = [];
  listLength = 0

  loadDis = true
  loading = false

  setParams = {
    username: '',
    videoid: 0,
    datetime: '',
    content: ''
  }

  getParams = {
    videoid: 0,
    limit: 2
  }

 action = ''

  mounted() {
    this.getVideoUrl()
    this.getUserConment()
  }

  like() {
    console.log('like')
  }

  dislike() {
    console.log('dislike')
  }

  handleSubmit() {
    if (!this.value) {
      return;
    }
    this.submitting = true
      this.setUserConment()
  }

  async setUserConment() {
    this.setParams.videoid = this.$route.params.id as any
    this.setParams.username = this.$store.state.username
    this.setParams.content = this.value
    this.setParams.datetime= moment().format('YYYY-MM-DD HH:mm:ss')
    this.submitting = false
    await api.setUserConment(this.setParams)
    this.value = ''
    message.success('评论成功')
  }

  async getUserConment() {
    this.getParams.videoid = this.$route.params.id as any
    this.loading = true
    const data = await api.getUserConment(this.getParams)
    if (!data) return
    this.dataList = data.info
    this.listLength = data.total
    if (this.getParams.limit < this.listLength) {
      this.getParams.limit += 2
    } else {
      this.getParams.limit = this.listLength
      this.loadDis = false
    }
    this.loading = false
  }

  loadMore() {
    this.getUserConment()
  }

php后端逻辑

    public function getUserConment(Request $request) {
        $videoid = $request->param('videoid');
        $limit = $request->param('limit');
        $info = Db::name('aqd_ping')->where('videoid',$videoid)->limit($limit)->select();
        $total = Db::name('aqd_ping')->where('videoid',$videoid)->count();
        $res = [
            'info' => $info,
            'total' => $total
        ];
        if ($info) {
            return json(['code'=>200,'msg'=>'inset success','data'=>$res]);
        } else {
            return json(['code'=>0,'msg'=>'no success']);
        }
    }

    public function setUserConment(Request $request) {
        $username = $request->param('username');
        $datetime = $request->param('datetime');
        $content = $request->param('content');
        $videoid = $request->param('videoid');
        $res = [
            'username' => $username,
            'datetime' => $datetime,
            'content' => $content,
            'videoid' => $videoid
        ];
        $info = Db::name('aqd_ping')->insert($res);
        if ($info) {
            return json(['code'=>200,'msg'=>'inset success','data'=>$res]);
        } else{
            return json(['code'=>0,'msg'=>'数据更新失败']);
        }

    }

未解决问题：   点赞那一块目前不知道怎么实现，欢迎兄弟交流下