微信小程序触底加载scroll-view_小程序商城实现触底加载

微信小程序触底加载 scroll-view

了解什么是触底加载？

需求：有个固定高度的容器，实现容器里面的内容触底加载
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 - 设置自定义下拉刷新阈值

实战上代码

亿点小知识：使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。

页面 根据不同的需求开启不同的属性

<scroll-view
		 class="car-list"
		 refresher-enabled="true"
		:refresher-triggered="flag"
		@refresherrefresh="refresherrefresh"
		@scrolltolower="scrolltolower"
		scroll-y="true"
		>
		<view class="item-msg" v-for="(item, index) in list" :key="item.id" >
		{{item.name}}
		</view>
</scroll-view>
1
2
3
4
5
6
7
8
9
10
11
12

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) // 合并数据
				}
			},
}
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

以上就是微信小程序触底加载感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…