uniapp 触底加载

方式一

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

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

// 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()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

方式二

scroll-view
文档：https://uniapp.dcloud.net.cn/component/scroll-view.html
使用竖向滚动时，需要给一个固定高度，通过 css 设置 height；
使用横向滚动时，需要添加white-space: nowrap;样式。
缺点：隐藏不了滚动条

// 给固定高度
.roll-list {
  width: 100%;
  height: 100%;
  // 隐藏不了滚动条
  &::-webkit-scrollbar {
    display:none
  }
}
1
2
3
4
5
6
7
8
9

<scroll-view
  class="roll-list"
  @scrolltolower="scrolltolower" // 触底事件
  scroll-y="true" // 竖向滚动
  show-scrollbar="false" // 隐藏滚动条
  >
	<view>示例</view>
	<view>示例</view>
	<view>示例</view>
</scroll-view>
1
2
3
4
5
6
7
8
9
10

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()
	}
｝
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
29
30
31
32
33
34
35
36