了解什么是触底加载？ 需求：有个固定高度的容器，实现容器里面的内容触底加载 1、内容盒子的高度 2、盒子里内容的总高度 3、滚动条的scrollTop 触底加载的原理就是 当里面的容器触底的时候进行分页，请求接口合并数据 `公式 盒子的高度+滚动条的scrollTop = 内容高度` 使用原生的计算方法比较麻烦 因此市面上有很多关于触底加载的插件 我们这里使用的是 uni-app 里面的 scroll-view scroll-view 属性 scroll-x：false - 允许横向滚动 scroll-y：false - 允许纵向滚动 show-scrollbar： 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 scroll-top：false - 控制是否出现滚动条 @refresherrefresh： - 自定义下拉刷新被触发 @scroll： - 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} @scrolltoupper：滚动到顶部/左边，会触发 scrolltoupper 事件 @scrolltolower：滚动到底部/右边，会触发 scrolltolower 事件 refresher-threshold：45 - 设置自定义下拉刷新阈值 实战上代码 亿点小知识：使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给添加white-space: nowrap;样式。 页面 根据不同的需求开启不同的属性 `    { {item.name}}   ` js 这里的逻辑大家可以根据自己的接口规则进行变动 主要的是看代码的逻辑 `data() {   return {    list: [],    flag:false,    query: {     per_page: 10,     page: 1,    },    total:0,   }  }, methods: {   refresherrefresh(){ // 下拉刷新    this.flag = true // 开启下拉刷新    this.query = {     per_page: 10,     page: 1,    }    this.list = []    this.refreshFun()    setTimeout(() => {     this.flag = false; // 关闭下拉刷新    }, 1000);   },   // 每次刷新需要用到的方法   refreshFun(){    if(this.index == 1 || this.index == 2){ // 判断是否需要传参 启用/禁用      this.query.enabled = this.index == 1 ? 1 : 0      this.init()    }else{      if(this.query.enabled == 1 || this.query.enabled == 0){       delete this.query.enabled      }      this.init()    }   },   // 触底加载   scrolltolower () {     const { list, total,query } = this     if (list.length === total) return // 判断是否加载全部     query.page++ // 触底加载 ++     this.refreshFun()   },   async init () { // 数据渲染    let { query } = this    uni.showLoading() // 加载中    let data = await 接口(query)    uni.hideLoading() // 加载完成    if ( data.code === SUCCESS ) {     this.total = data.meta.total // 获取总数     this.list = this.list.concat(data.data) // 合并数据    }   }, }`