文章目录

---

整体思路

         监听页面滑动事件，判断滑动方向从而改变移动距离。

---

一、HTML部分

           代码如下（示例）：

<template>
	<view class="slideBox" @touchstart="touchStart" @touchend="touchEnd">
		<!-- 这里放需要滑动的区域 -->
		<view class="slideBox_slidingRegion" :style="{left: vwidth + '%'}">
			<view class="slideBox_slidingRegion_item"> <!-- 模块一 -->
				<view class="slideBox_slidingRegion_item_child" v-for="item in demandLists">{{item.name}}</view>
			</view>
			<view class="slideBox_slidingRegion_item"> <!-- 模块二 -->
				<view class="slideBox_slidingRegion_item_child" style="background-color: #28AC74;" v-for="item in supplierLists">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

二、Script部分

           代码如下（示例）：

<script>
	export default {
		data() {
			return {
				startX: 0, //滑动开始x轴位置
				vwidth: 0, //滑动的x轴距离
				demandLists: [{ //求购商品列表
						name: '强盛集团 1',
					},
					{
						name: '强盛集团 2',
					},
					{
						name: '强盛集团 3',
					},
					{
						name: '强盛集团 4',
					},
					{
						name: '强盛集团 5',
					}
				],
				supplierLists: [{ //求购商品列表
						name: '永恒之主—白小纯',
					},
					{
						name: '永恒之主—白小纯',
					},
					{
						name: '永恒之主—白小纯',
					},
					{
						name: '永恒之主—白小纯',
					},
					{
						name: '永恒之主—白小纯',
					}
				],
			}
		},
		methods: {
			touchStart(e) {
				if (e.touches.length == 1) {
					this.startX = e.touches[0].clientX;
				}
			},
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					let diff = endX - this.startX;
					const that = this
					if (Math.abs(diff) > 100) {
						console.log(diff)
						if (diff > 0) { //右滑 这里可以放需要进行的业务逻辑
							// 	console.log('元素信息右滑：', that.vwidth)
							that.vwidth += 100
							if (that.vwidth == 100) {
								that.vwidth = -100
							}
						} else { //左滑	这里可以放需要进行的业务逻辑
							const that = this
							console.log('元素信息左滑：', that.vwidth)
							that.vwidth += -100
							if (that.vwidth == -200) {
								that.vwidth = 0
							}
						}
					}
				}
			}
		}
	}
</script>

三、Style部分

           代码如下（示例）：

<style lang="scss">
	.slideBox {
		display: flex;
		width: 100%;
		height: 1000rpx;
		overflow: hidden;
		position: relative;

		&_slidingRegion {
			display: flex;
			flex-direction: row;
			width: 200%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;

			&_item {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				&_child {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 180rpx;
					margin: 10rpx 0;
					color: #fff;
					font-size: 34rpx;
					background-color: #fb723b;
				}
			}
		}
	}
</style>

---

总结

        没总结，只是简单的功能，谢谢大家观看！