uniapp中scroll-view 滚动下一页

插件

<template>
	<view class="componentsContent">
		<scroll-view scroll-y="true" @scrolltolower="nextPage">
			<view class="self-list">
				<slot></slot>
				<view v-if="showTipsText" class="listMore" @click="nextPage()">
					<u-loadmore :status="listLoading" :load-text="loadText"></u-loadmore>
				</view>
				<view class="noneBlock" v-if="!showTipsText"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			page: {
				type: Number,
				default: 1
			},
			limit: {
				type: Number,
				default: 20
			},
			listLoading: {
				required: true,
				type: String
			},
			showTipsText: {
				type: Boolean,
				default: true
			},
			loadText: {
				type: Object,
				default: () => ({
					// loadmore: '请点击或轻轻上拉加载数据',
					loadmore: '点击加载数据',
					loading: '努力加载中',
					nomore: '没有更多了'
				})
			}
		},
		computed: {
			currentPage: {
				get() {
					return this.page
				},
				set(val) {
					this.$emit('update:page', val)
				}
			},
			pageSize: {
				get() {
					return this.limit
				},
				set(val) {
					this.$emit('update:limit', val)
				}
			}
		},
		methods: {
			nextPage() {
				if(this.listLoading === 'loadmore'){
					this.currentPage ++;
					this.$emit('pagination');
				}
			}
		}
	}
</script>

<style scoped>
	.componentsContent,.componentsContent>scroll-view{height:100%;}
	/* .self-list{padding-top:15rpx;} */
	.noneBlock{width:100%;height:50rpx;}
</style>

使用

<self-pagination class="self-pagination" :listLoading.sync="listLoading" :page.sync="where.page"
						:limit.sync="where.limit" @pagination="getIndex">
						<view class="" style="padding: 20rpx;">
							<view class="" style="position: relative; " v-for="(item,index) in list" :key='index'>
								<image style="width: 50rpx;height: 50rpx;   position: absolute; left: 0rpx; top: 40rpx;"
									src="https://ch-medical-online.oss-cn-chengdu.aliyuncs.com/20221223/24bdc05c267c4b1cbac16980e1580975.png"
									mode="widthFix"></image>
								<view class=""
									style="border-bottom: 1px solid #f5f5f5; width: 85%; display: inline-block; margin-left: 70rpx;padding: 20rpx 0;">
									<view class="overH">
										<view class="left" style="font-weight: bold;">{
   
   {item.title}}</view>
										<view class="right " :class="{'color':item.pm == 1 }"
											style=" font-weight: bold;">{
   
   { item.pm == 0 ? "-" : "+" }}{
   
   {item.number}}
										</view>
										<!-- <view class="right " style="font-weight: bold;">-450</view> -->
									</view>
									<view class="overH">
										<view class="left textColor">{
   
   {item.createTime}}</view>
										<!-- <view class="right textColor">赠送：{
   
   {item.}}</view> -->
									</view>
								</view>
							</view>
						</view>
					</self-pagination>

引入

	import selfPagination from './self-pagination/index'
	export default {
		components: {
			selfPagination
		},