uniapp 触底加载

姽式、2023-09-18 19:29

方式一

onReachBottomDistance

缺点：需要整个页面滑动，局部滑动触发不了

javascript 复制代码

{
// pages.json
// 路由下增加 onReachBottomDistance
"path": "detailed/detailed",
  "style": {
    "navigationBarTitleText": "收益明细",
    "onReachBottomDistance": 50 //距离底部多远时触发 单位px
  }
},

javascript 复制代码

// detailed.js
// 触底 与 onLoad，onShow同级
onLoad(options) {},
onShow() {},
onReachBottom() {
  if (this.page < this.totalPages) {
    this.page++
  } else {
    return uni.showToast({
      title: '没有更多数据',
      icon: 'none',
      duration: 2000
    });
  }
  
  uni.showLoading({
  	title: '加载中'
  });
  
  // 请求
  this.getList()
}

方式二

scroll-view

文档：https://uniapp.dcloud.net.cn/component/scroll-view.html

使用竖向滚动时，需要给一个固定高度，通过 css 设置 height；

使用横向滚动时，需要添加white-space: nowrap;样式。

缺点：隐藏不了滚动条

javascript 复制代码

// 给固定高度
.roll-list {
  width: 100%;
  height: 100%;
  // 隐藏不了滚动条
  &::-webkit-scrollbar {
    display:none
  }
}

javascript 复制代码

<scroll-view
  class="roll-list"
  @scrolltolower="scrolltolower" // 触底事件
  scroll-y="true" // 竖向滚动
  show-scrollbar="false" // 隐藏滚动条
  >
	<view>示例</view>
	<view>示例</view>
	<view>示例</view>
</scroll-view>

javascript 复制代码

data() {
	return{
		this.page: 1,
    	this.totalPages: ''
    	this.list: []
	}
}，
methods: {
	getList() {
	 api.list({page: this.pages.page,}).then(res => {
	    this.page = res.page
	    this.totalPages = res.totalPages
	    // es6 合并数组
	    this.list = [...this.list,...res.items]
	    uni.hideLoading(); // 关闭加载动画
	  })
	},
	scrolltolower() {
	  if (this.page < this.totalPages) {
	    this.page++
	  } else {
	    return uni.showToast({
	      title: '没有更多数据',
	      icon: 'none',
	      duration: 2000
	    });
	  }
	  
	  uni.showLoading({
	  	title: '加载中'
	  });
	  
	  // 请求
	  this.getList()
	}
｝