uni-app实现虚拟长列表--已知数量

使用了number-precision.js，用于计算，当然可以用自己的算法
如果不知道咋使用可以在使用

npm install number-precision

代码如下记录

<template>
	<view class="content">
		<view style="width: 200rpx;height: 500rpx;overflow-y: scroll;" @touchmove="touchmoveMethod" @touchstart="touchstartMethod">
			<view style="height: 50rpx;width: 100%;background-color: #2B85E4;color: white;"  v-for="(item,index) in cash" :key="index">{{item}}</view>
		</view>
	</view>
</template>

<script>
	import NP from 'number-precision'
	export default {
		data() {
			return {
				cash:[],
				list:[],
				startX:'',
				startY:'',
				moveX:'',
				moveY:'',
				endY:'',
				startIndex:0,
				endIndex:9,
				transFormStyle:'translate(0rpx,0rpx)'
			}
		},
		onLoad() {
			for(let i=1;i<=100;i++){
				this.list.push(i)
			}
		},
		onShow() {
			this.cash=this.list.slice(0,11)
			
		},
		methods: {
			
			touchmoveMethod(e){
				let moveY= e.touches[0].clientY
				moveY=NP.round(moveY,0)
				const a=this.startY-moveY
				const l=this.list.length
				//移动的行数
				const _this=this
				const b= NP.round(NP.divide(NP.times(a,2),50), 0)
				if(a>0){
					//console.log('向下滑动'+b)
					if(l-_this.endIndex-1-b>0){
						 _this.endIndex= _this.endIndex+b
						 _this.startIndex=_this.endIndex-9
					}else{
						_this.endIndex=l-1
						_this.startIndex=_this.endIndex-9
						
					}
					 
					//console.log(_this.startIndex+'------'+_this.endIndex)
					
				}else{
					
					if(_this.startIndex+1+b>0){
						 _this.startIndex=_this.startIndex+b
						 _this.endIndex=_this.startIndex+9
					}else{
						 _this.startIndex=0
						 _this.endIndex=9
					}
					/* console.log(b)
					console.log(_this.startIndex+'------'+_this.endIndex) */
				}
				
				this.cash=this.list.slice(_this.startIndex,_this.endIndex+1)
			},
			
			touchstartMethod(e){
				this.startY =NP.round(e.touches[0].clientY,0)
			},
			/* touchendMethod(e){
				this.endY=e.changedTouches[0].clientY
				const a=this.startY -this.endY
				const l=this.list.length
				//移动的行数
				const _this=this
				const b= NP.round(NP.divide(NP.times(a,2),50), 0) 
				if(a>0){
					console.log('向下滑动'+b)
					if(l-_this.endIndex-1-b>0){
						 _this.endIndex= _this.endIndex+b
						 _this.startIndex=_this.endIndex-9
					}else{
						_this.endIndex=l-1
						_this.startIndex=_this.endIndex-9
						
					}
					 
					//console.log(_this.startIndex+'------'+_this.endIndex)
					
				}else{
					
					if(_this.startIndex+1+b>0){
						 _this.startIndex=_this.startIndex+b
						 _this.endIndex=_this.startIndex+9
					}else{
						 _this.startIndex=0
						 _this.endIndex=9
					}
					
				}
				
				this.cash=this.list.slice(_this.startIndex,_this.endIndex+1)
				
			} */
			
		},
		onPageScroll(e){
			console.log('页面发生滚动')
			console.log()
		},
		mounted() {
			var that = this;
			uni.$on('onPageScroll', function(data) {
				console.log("页面滚动了")
				console.log(data);
				that.scrollTop = data;
			});
		}
	}
</script>

<style>
	uni-page-body{
		height: 100%;
		width: 100%;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>