uniapp: поделитесь собственным образцом слайда

• Сначала взгляните на html , который разделен на две части: основную часть контента и функциональную часть, которая расположена справа от основной части в css.

<view class="section" ref="box_center" 
    @touchstart="drawStart" 
    @touchmove="drawMove($event)"
    @touchend="drawEnd($event)">
    <view class="content">
         <view class="setting">
		 	这里放的是内容
		 </view>
	</view>
	<view class="function">
		 <view class="title">这里是功能</view>
		 <view class="edit flexCenter">编辑信息</view>
         <view class="more flexCenter"><text>更多</text></view>
         <view @click="restore()">收起</view>
	</view>
</view>

• Логическая часть js-кода (примечание: при рендеринге нескольких элементов одного и того же элемента необходимо добавить значение индекса, чтобы получить элемент this.$refs.box_center, не забудьте указать параметр при вызове метода)

data() {
	return {
		clientX:0,
	}
},
methods: {
	// 开始触摸
	drawStart(e) {
		// 获取开始触摸时的位置
		this.clientX = e.changedTouches[0].clientX
	},
	// 触摸过程
	drawMove(e) {
		//获取触摸过程中的结束位置
		var endX = e.changedTouches[0].clientX;
		//用结束位置-开始位置
		let diff = endX - this.clientX
		//如果diff小于0表示用户是左滑的
		if (diff < 0) {
			let box_center = this.$refs.box_center
			//注意给个动画，小编在css上写过了，也可以在这里赋值
			box_center.$el.style.left = '-110px'
		}
	},
	// 结束触摸
	drawEnd(e) {
		var endX = e.changedTouches[0].clientX;
		let diff = endX - this.clientX;
		let box_center = this.$refs.box_center
		// 防止误触 -- 给一个误差区间，防止用户误触
		if (Math.abs(diff) > 20) {
			if (diff < 0) {
				box_center.$el.style.left = '-220rpx'
			} else {
				box_center.$el.style.left = '0'
			}
		}
	},
	// 点击恢复原来的位置
	restore() {
		let box_center = this.$refs.box_center
		box_center.$el.style.left = '0'
	},
}

• 3 события касания пальца с использованием uniapp

        1. touchstart: срабатывает при прикосновении пальца к экрану

        2. touchmove: относится к непрерывному срабатыванию при скольжении по экрану.Во время этого события вызов события preventDefault() может предотвратить прокрутку.

        3.touchend: срабатывает, когда палец покидает экран

• визуализация

        -- первый рендер

        -- при свайпе влево

        -- при свайпе вправо

        -- Нажмите, чтобы закрыть

•  Наконец, реализована функция скольжения приложения.
• Полный код выглядит следующим образом: (Редактор взял код из моего собственного проекта. Если кому пригодится, то css нужно модифицировать самому!!)

<template>
	<view>
		<view class="section" ref="box_center" 
			@touchstart="drawStart" 
			@touchmove="drawMove($event)"
			@touchend="drawEnd($event)">
			<view class="content">
				<view class="setting">
					这里放的是内容
				</view>
			</view>
			<view class="function">
				<view class="title">这里是功能</view>
				<view class="edit flexCenter">编辑信息</view>

				<view class="more flexCenter"><text>更多</text></view>
				<view @click="restore()">
					收起
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clientX:0,
			}
		},
		methods: {
			// 开始触摸
			drawStart(e) {
				// 获取开始触摸时的位置
				this.clientX = e.changedTouches[0].clientX
			},
			// 触摸过程
			drawMove(e) {
				//获取触摸过程中的结束位置
				var endX = e.changedTouches[0].clientX;
				//用结束位置-开始位置
				let diff = endX - this.clientX;

				//如果diff小于0表示用户是左滑的
				if (diff < 0) {
					let box_center = this.$refs.box_center
					//注意给个动画，小编在css上写过了，也可以在这里赋值
					box_center.$el.style.left = '-110px'
				}
			},
			// 结束触摸
			drawEnd(e) {
				var endX = e.changedTouches[0].clientX;
				let diff = endX - this.clientX;
				let box_center = this.$refs.box_center
				// 防止误触 -- 给一个误差区间，防止用户误触
				if (Math.abs(diff) > 20) {
					if (diff < 0) {
						box_center.$el.style.left = '-220rpx'
					} else {
						box_center.$el.style.left = '0'
					}
				}
			},
			// 点击恢复原来的位置
			restore() {
				let box_center = this.$refs.box_center
				box_center.$el.style.left = '0'
			},
		}
	}
</script>

<style scoped lang="scss">
	.section {
		min-height: 408rpx;
		width: 100%;
		margin-bottom: 16rpx;
		position: relative;
		min-height: 408rpx;
		transition: all 0.5s linear;
		box-shadow: 0 4rpx 8rpx rgba(67, 89, 201, 0.1);
		left: 0;

		.content {
			width: 100%;
			min-height: 408rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx;

			.setting {
				width: 100%;
			}
		}

		.function {
			width: 204rpx;
			height: 100%;
			background-color: #fff;
			border-radius: 8rpx;
			position: absolute;
			right: -220rpx;
			top: 0;
			padding: 8rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-shadow: 0 4rpx 8rpx rgba(67, 89, 201, 0.1);
			align-items: center;
			font-size: 24rpx;
			margin-bottom: 16rpx;
			text-align: center;

			.title {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #3B5BD2;
				font-weight: bold;
				text-align: center;
				width: 100%;
				border-bottom: 2rpx solid #E4E4E4;
			}

			.edit,
			.more {
				width: 152rpx;
				height: 48rpx;
				border-radius: 25rpx;
				line-height: 48rpx;
				color: #fff;

				text {
					display: block;
					height: 100%;
					width: 96rpx;
					text-align: center;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.edit,
			.more {
				background-color: #0B33FF;
				margin: 10rpx auto 10rpx;
			}
		}
	}
</style>