• 方法一：mescroll插件
  
  mescroll插件

<!-- 资讯列表 -->
<template>
  <view class="pages">
    <no-data v-if="NoData" title="暂无数据" :isPosition="true" :top="200" />
    <mescroll-uni ref="mescrollRef" class="mescroll" @init="mescrollInit" @down="downCallback" @up="upCallback"
      :fixed="true" :top="mescrollTop" :style="{ height: _windowHeight - _statusHeight - 48 + 'px' }">
      <loading class="visiable" v-if="visiable" :visiable="visiable" />
      <block v-for="(item, index) in list" :key="index">
        <news-item :content="item" :keywords="keywords" />
      </block>
      <!-- 没有更多数据了 -->
      <no-next v-if="list.length > 0 && list.length < 5" :style="{ marginTop: '10px' }" />
    </mescroll-uni>
  </view>
</template>

<script lang="js">
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      list: [],
      NoData: false,
      loading: false,
      mescrollTop: '0px',
      upOption: {
        page: {
          num: 1,
          size: 12,// 每页数据的数量,默认10
          time: null
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          use: true,
          icon: require('@/static/images/nodata@2x.png'),
          tip: '暂无数据'
        },
        textNoMore: '没有更多数据了',
        canReset: false
      },
      visiable: false,
    }
  },
  onShow() {
    this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
    this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
    this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
  },
  watch: {
    keywords(newVal) {
      console.log(newVal, '资讯搜索');
      this.visiable = true
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    },
  },
  methods: {
    /*上拉加载的回调*/
    async upCallback(page) {
      try {
        let pageNum = page.num; // 页码, 默认从1开始
        let pageSize = page.size; // 页长, 默认每页10条
        let videoItem
        const res = await fetchList({
          keywords: this.keywords || '',
          curpage: pageNum,
          pagesize: pageSize,
        })
        let curPageData = res.Data;
        let curPageLen = res.Data.length
        let totalPage = res.PageCount
        if (page.num == 1) { //如果是第一页需手动置空列表
          this.list = videoItem ? [videoItem] : [];
          this.finish = true
        }
        if (curPageData) {
          this.list = this.list.concat(curPageData) //追加新数据
        }
        this.mescroll.endByPage(curPageLen, totalPage)
        this.visiable = false
      } catch (err) { }
      if (!this.list || this.list.length === 0) {
        this.NoData = true
      } else {
        this.NoData = false
      }
    }
  },
}
</script>

<style lang=scss>
.pages{
  flex: 1;
  background-color: #fff;
}
.scroll{
  height:calc(100vh - 80px);
}
.visiable{
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

• 方法二：普通列表加载scroll-view

<template>
  <scroll-view :scroll-y="true" class="pages" lower-threshold="50" @scrolltolower="onreachBottom" refresher-enabled
    :refresher-triggered="isRefresh" @refresherrefresh="onRefresh">
    <no-data v-if="finish && list.length === 0" title="暂无数据"></no-data>
    <view class="info-list" v-else>
      <view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item)"></view>
      <loading v-show="loading"></loading>
      <no-next v-show="!loading && page >= pageCount && finish"></no-next>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 12,
      list: [],
      pageCount: 0,
      isRefresh: false,
      finish: false,
      loading: false
    }
  },
  mounted() {
    this._findList(true)
  },
  methods: {
    async _findList(init) {
      if (init) {
        this.page = 1;
        this.list = []
        this.loading = false;
        this.finish = false;
      }
      uni.showLoading({
        title: "加载中",
      });
      try {
        const res = await getList({
          page_size: this.pageSize,
          page: this.page,
        });
        if (this.page === 1) {
          this.list = res.Data.list || [];
        } else {
          this.list.push(...res.Data.list);
        }
        this.loading = false;
        this.pageCount = res.Data.pages;
      } catch (err) {
        console.log(err)
        this.list = [];
      }
      this.finish = true
      uni.hideLoading()
    },
    async onRefresh() {
      this.isRefresh = true;
      await this._findList(true);
      this.$nextTick(() => {
        this.isRefresh = false;
      });
    },
    onreachBottom() {
      if (this.pageCount > this.page && this.loading === false) {
        this.page++;
        this.loading = true;
        this._findList();
      }
    },
  },
}
</script>

<style lang=scss>
.pages {
  overflow-y: auto;
  height: 100%;

  .item {
    display: block;
    width: 100%;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
    margin-bottom: 16rpx;
    background-color: #fff;
  }
}
</style>