Uni-app实现左右滑动页面内容切换(兼容微信小程序)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Uni-app实现左右滑动页面内容切换(兼容微信小程序)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

整体思路

一、HTML部分

二、Script部分

三、Style部分

前言

（先声明哦我可不是偷懒，只是想学术借鉴一下）因为最近有在做左右滑动功能，秉持着能 ctrl+c 绝不动脑子的原则，开始了我的一顿操作，结果很明显没找到，言归正传，上代码。

整体思路

通过@click方法获取点击元素的滑动信息，最后改变已经双向绑定的定位元素Left值,就Ok了！

一、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>