uniapp项目实践总结(十七)实现滚动触底加载

导语:在日测的开发过程中,经常会碰到页面需要渲染大量数据的情况,这时候就需要用到滚动加载功能,下面总结一下方法。

目录

  • 原理分析
  • 实战演练
  • 案例展示

原理分析

使用@scrolltolower事件来监听滚动到底部,然后加载下一页的数据。

实战演练

模板页面

html 复制代码
<scroll-view
  :scroll-y="true"
  class="block-main block-two-level block-pad"
  @scrolltolower="scrollBottom">
  <view class="scroll-ls" v-for="(item, index) in scrollInfo.list" :key="index"> {{ item }} </view>
  <uni-load-more v-if="scrollInfo.list.length" :status="scrollInfo.loading"></uni-load-more>
</scroll-view>

样式编写

scss 复制代码
.scroll-ls {
  margin-top: 20rpx;
  padding: 50rpx 0;
  text-align: center;
  background: $f8;
}

脚本使用

  • 定义数据
js 复制代码
// 滚动列表
const scrollInfo = reactive({
  originList: [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
    27, 28,
  ],
  list: [],
  pageInfo: {
    page: 1,
    size: 8,
    pages: 0,
  },
  loading: "more",
});
  • 方法调用
js 复制代码
// 滚动到底部
function scrollBottom() {
  console.log("滚动到底部!");
  if (scrollInfo.pageInfo.page < scrollInfo.pageInfo.pages) {
    scrollInfo.pageInfo.page++;
    scrollInfo.loading = "loading";
    getList();
  } else {
    scrollInfo.loading = "noMore";
  }
}
  • 获取列表
js 复制代码
// 获取列表
function getList() {
  if (scrollInfo.pageInfo.page <= 1) {
    show.value = true;
  }
  let data = proxy.$apis.utils.splitData(scrollInfo.originList, 8);
  scrollInfo.pageInfo.pages = data.pages;
  setTimeout(() => {
    if (scrollInfo.pageInfo.page <= 1) {
      scrollInfo.list = data.list[scrollInfo.pageInfo.page - 1];
      setTimeout(() => {
        show.value = false;
      }, 500);
    } else {
      scrollInfo.list = [...scrollInfo.list, ...data.list[scrollInfo.pageInfo.page - 1]];
    }
    scrollInfo.loading = scrollInfo.pageInfo.page < scrollInfo.pageInfo.pages ? "more" : "noMore";
  }, 1000);
}

案例展示

  • h5 端效果
  • 小程序端效果
  • APP 端效果

最后

以上就是实现滚动触底加载的主要内容,有不足之处,请多多指正。

相关推荐
Sheldon一蓑烟雨任平生9 分钟前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
詩句☾⋆᭄南笙9 分钟前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒21 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌26 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip31 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙36 分钟前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
Rhys..42 分钟前
JS - npm init
开发语言·javascript·npm
夏天想1 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界1 小时前
这个 CSS 特性,可能终结样式冲突
前端·css
zzzsde1 小时前
【C++】深入理解string类(5)
java·前端·算法