uniapp（5）滚动列表scroll-view

html 复制代码

	<scroll-view scroll-y @refresherrefresh='getFresh' 
@scrolltolower="lowerBottom" @scroll="scroll" 
				style="height:52vh;border-radius:
 10rpx;padding-top: 24rpx;">
				<view class="flex_center" >
				<view class="cententCard pd32 mgb16 radius20" 
style="width: 100%;" v-for="(item,index) in taskList"
					:key="index" @click="gotoTaskDetail(item)">
					<view class="taskTitle flex_left_row mgb16">
<view class="flex_left_row" style="margin-top: 10rpx;">
				<text class="fs24 mgr16 bgtext1 radius8 text1">
                        {{item.text1}}
                </text>
				<text class="fs24 bgtext2 radius8 text2">{{item.text2}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			</scroll-view>

scroll-view | uni-app官网

|----------------|-------------|---|-------------------------------|
| @scrolltoupper | EventHandle | | 滚动到顶部/左边，会触发 scrolltoupper 事件 |

|---------|-------------|---|-----------------------------------------------------------------------------------------|
| @scroll | EventHandle | | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |

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

1、触底加载下一页

进入页面默认进行数据加载，加载的列表数据为taskList数组，根据后端返回一次10条进行加载

触底触发@scrolltolower="lowerBottom"

这个时候需要进行第一次判断

后端返回的数据是否满足约定的10条，或者page*limit<total的判断

获取到的数组存在addList数组中，push到taskList中

如果没有加载到全部数据，触底时候继续触发

如果满足就提示已经没有更多数据了

javascript 复制代码

			lowerBottom() { //触底事件
			console.log("触底");
			console.log(this.addList);
				 if (this.addList.length < 10) {
					uni.showToast({
						title: `没有更多数据了`,
						icon: 'none',
						duration: 2000
					})
				} else {
					this.page++
					this.getplanList()
				}
			},
			getplanList(){
				// 获取接口最新list数据
				// 模拟接口请求
				let listMock=[
					{
						contentID: '2904398015',
						planStatusStr: 'hahahha',
						text1: '线上',
						text2: '月结',
						info: "1.具备良好的物品识别和分类能,
						money: '300'
					}
				]
                this.addList=listMock;
				this.taskList.push(...listMock)
				
			}