uniapp 实现自动滚动并支持左右手滑-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 实现自动滚动并支持左右手滑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp 实现自动滚动并支持左右手滑

<template>
	<view class="container">
		<view class="content">
			<view class="scroll-view" :style="!flag ? 'overflow: hidden;' : 'overflow:auto hidden;'">
				<view
					class="scroll-view-content"
					:style="trasitionScroll + 'transform:translateX(-' + scrollLeft + 'px) translateZ(0px)'"
					@touchmove.stop="onTouchMove"
					@touchstart.stop="onTouchStart"
					@touchend.stop="onTouchEnd"
				>
					<view class="avatar" v-for="(item, index2) in avatarList" :key="index2" style=" display: inline-block;">
						<view :style="'background-image: url(' + item + ');'" class="img-item"></view>
					</view>
				</view>
			</view>
			<!-- <view><slider :value="scrollLeft" @changing="sliderChange" @change="sliderChangeEnd"  min="0" max="1250" step="2" show-value /></view> -->
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			scrollLeft: 0,
			scrollLeftStart: 0,
			timer: '',
			flag: false,
			StartX: 0,
			offsetLeftIndex:1,
			trasitionScroll: 'transition:-webkit-transform 0.3s ease-out 0s;',
			avatarList: [
				
			]
		};
	},
	onReady() {
		this.loadData();
	},
	methods: {
		loadData() {
			for (var i = 1; i <= 10; i++) {
				this.avatarList.push(require(`../../assets/test${i}.jpg`))
			}
			this.timer = setInterval(() => {
				this.scrollLeft += 10;
				if (this.scrollLeft >= 1250) {
					this.flag = true;
					this.trasitionScroll = '';
					clearInterval(this.timer);
				}
			}, 66.7);
		},
		onTouchStart(e) {
			this.scrollLeftStart = this.scrollLeft;
			this.StartX = e.changedTouches[0].clientX;

			this.trasitionScroll = 'transition:-webkit-transform 0.1s ease-out 0s;';
			clearInterval(this.timer);
		},
		onTouchMove(e) {
			this.trasitionScroll = '';
			let value = this.StartX - e.changedTouches[0].clientX;
			if (e.target.offsetLeft + value >= 1450 ) {
				this.scrollLeft=1250
				return;
			} else if (e.target.offsetLeft + value <= 0) {
				this.scrollLeft = 0;
				return;
			}
			this.scrollLeft = this.scrollLeftStart + value;
		},
		onTouchEnd(e) {
			this.trasitionScroll = 'transition:-webkit-transform 0.3s ease-out 0s;';
			if (this.scrollLeft <= 1250) {
				this.timer = setInterval(() => {
					this.scrollLeft += 10;
					if (this.scrollLeft >= 1250) {
						this.flag = true;
						clearInterval(this.timer);
					}
				}, 66.7);
			}
		},
	}
};
</script>
<style lang="scss">
page{
	background:linear-gradient(135deg,#42e695,#3bb2b8) ;
}
.content {
	width: 100vw;
	overflow: hidden;
	white-space: nowrap;
	.scroll-view {
		// overflow: auto;
		.scroll-view-content {
			.avatar {
				margin: 20rpx;
				.img-item {
					width: 145px;
					height: 290rpx;
					border-radius: 40rpx;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: 0 40%;
				}
			}
		}
	}
}
/deep/ ::-webkit-scrollbar {
	display: none;
}
</style>