yj-register/components/WF-scroll/WF-scroll.vue

<template>
	<div>
		<scroll-view show-scrollbar="true" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="upper" class="scroll"
			@scroll="scroll" :style="{'height':scrollHeight+'rpx'}">
			<div class="content"  @touchstart="touchstart" @touchend="touchend">
				<view class="flex-row justify-between rollItem" v-for="(item,index) in listAr">
					<view>
						<text class="text2">{{item.createTime}}</text>
						<text class="text1">{{item.userName}}</text>
					</view>
					<view>
						<text class="text3">{{item.prizeName}}</text>
<!--						<text class="text2">{{item.prizeName}}</text>-->
					</view>
				</view>
			</div>
		</scroll-view>
	</div>
</template>

<script>
	/*
	listAr  循环数组
	scrollHeight  scroll可视区域高度
	scrollTimer  是否默认开始滚动
	*/
	export default {
		name: "WF-scroll",
		props: {
			listAr: {
				type: Array,
				default () {
					return []
				}
			},
			scrollHeight: '',
			scrollTimer:'',
		},
		data() {
			return {
				scrollTop: 0,
				scrollType: true, //判断滚动所用为防止滚动到底部多次赋值
				contentHeight: '', //内容高度
				touchstartType: false,
			};
		},
		created() {
			setTimeout(() => {
				if(this.scrollTimer){
					this.setTimer()
				}
				const query = uni.createSelectorQuery().in(this);
				query.select('.content').boundingClientRect(data => {
					this.contentHeight = data.height * 2 - 40
				}).exec();
			}, 1000)
		},
		methods: {
			// 手指触摸
			touchstart() {
				this.touchstartType = true
				this.removeTimer()
			},
			// 手指离开
			touchend() {
				this.touchstartType = false
				this.setTimer()
				this.upper()
			},
			scroll(e) {
				if (this.touchstartType) {
					this.scrollTop = e.detail.scrollTop
				}
			},
			upper() {
				console.log(this.touchstartType);
				if (!this.touchstartType) {
					setTimeout(() => {
						if (this.scrollType && this.contentHeight > this.scrollHeight) {
							this.scrollTop = 0
							this.scrollType = false
							setTimeout(() => {
								this.scrollType = true
							}, 3000)
						}
					}, 3000)
				}

			},
			removeTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			// 这里设置滚动速度时间越短滚动则越快
			setTimer() {
				this.removeTimer()
				this.timer = setInterval(() => {
					this.scrollTop++
				}, 44)
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/*padding-top: 40rpx;*/
		/*background: #fff;*/
	}
	.scroll{
		overflow: hidden;
	}
	.content_list {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		cursor: pointer;
		color: #1debffff;
		font-size: 32rpx;
		text-align: left;
		padding: 20rpx 0;
	}
	.rollItem{
		padding: 0 24rpx;
		font-size: 24rpx;
		border-bottom: 1px solid #f1f1f1;
		line-height: 60rpx;
	}
	.text1{
		margin-left: 10rpx;
	}
	.text2{
		margin-left: 10rpx;
	}
	.text3{
		color: #F56C6C;
	}
</style>