小程序 swiper滑动 层叠滑动效果

news2024/9/23 13:18:46

整个红色区域为可滑动区域,数字1区域为展示区域,数字2为下一个展示模块

<scroll-view class="h_scroll_horizontal" enhanced="ture" bind:touchend="touchEnd" bind:touchstart="touchStart">
			<view class="h_od_big">
				<swiper class="h_od_swiper"  current="{{orderIndex}}">
					<block wx:for="{{orderTip}}" wx:key="index">
						<swiper-item catchtouchmove="stopTouchMove">
							<view class="h_od_swiper_box">
								{{item}}
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="h_od_gird_box">
					<view class="h_od_gird {{index==0?'h_od_gird_show':''}}" wx:for="{{orderTip2}}" wx:key="index" wx:if="{{index<3}}"  style='transform:translate({{index*15}}rpx,{{index*20}}rpx);z-index: {{-index}};height: {{index==0?index+1*228:228-15*index}}rpx;'>{{orderTip[orderIndex+1]}}
					</view>
				</view>
			</view>
		</scroll-view>
.h_od_swiper {
	/* border: 1rpx solid black; */
	width: 450rpx;
	height: 228rpx;
	background: linear-gradient(180deg, #FFF6E3 0%, #FFE5D9 100%);
	border-radius: 12rpx;
	border: 1rpx solid #E08100;
	z-index: 0 !important;
}

.h_od_swiper_box {
	width: 100%;
	height: 100%;
	padding: 24rpx 20rpx;
	
}
.h_scroll_horizontal {
	/* border: 1rpx solid red; */
	width: 100%;
	margin-bottom: 30rpx;
}

.h_od_big {
	display: flex;
	width: 100%;
	/* border: 1rpx solid #0064FF; */
}

.h_od_gird_box {
	position: relative;
	/* border: 1rpx solid #0064FF; */
	margin-left: 15rpx;
	width: 185rpx;
	height: 228rpx;
	position: relative;
	display: flex;
	flex-direction: columnl;
	box-sizing: border-box;

}

.h_od_gird {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #FFF6E3 0%, #FFE5D9 100%);
	border-radius: 12rpx;
	border: 1rpx solid #E08100;
}

.h_od_gird_show {
	background: linear-gradient(180deg, #FFF6E3 0%, #FFE5D9 100%);
	left: 0rpx;
	position: absolute;
	z-index: 100;

}
data: {
		


		orderTip: ['1', '2', '3', '4', '5', '6'],
		orderTip2: ['1', '2', '3', '4', '5', '6'],
		orderIndex: 0,
		flag: '',
		lastX: '',
		lastY: '',


	},

/**
	*   滑动开始
	*/
	touchStart(e) {
		let that = this
		console.log(e)
		that.data.flag = 0;
		that.data.lastX = e.changedTouches[0].pageX;
		that.data.lastY = e.changedTouches[0].pageY;
	},
	/**
	*   滑动结束
	*/
	touchEnd(e) {
		let that = this
		let { flag, lastX, lastY, orderIndex, orderTip, orderTip2 } = that.data
		if (flag !== 0) {
			return;
		}
		let currentX = e.changedTouches[0].pageX;
		let currentY = e.changedTouches[0].pageY;
		let tx = currentX - lastX;
		let ty = currentY - lastY;
		//左右方向偏移大于上下偏移认为是左右滑动
		if (Math.abs(tx) - Math.abs(ty) > 5) {
			// 向左滑动
			if (tx < 0) {
				// 如果到最右侧
				console.log('向左滑动');
				flag = 1;
				console.log(orderIndex, orderTip.length);
				if (orderIndex >= 0 && orderIndex < orderTip.length - 1) {
					console.log(orderTip2.length);
					orderTip2.pop()
					that.setData({
						orderIndex: orderIndex + 1,
						orderTip2: orderTip2
					})
				}
				// 向右滑动()
			} else if (tx > 0) {
				// 如果到最左侧
				flag = 2;
				console.log('向右滑动');
				console.log(orderIndex);
				if (orderIndex > 0) {
					orderTip2.push('')
					that.setData({
						orderIndex: orderIndex - 1,
						orderTip2: orderTip2
					})
				}

			}
		}
		//上下方向滑动
		else {
			if (ty < 0) {
				//向上滑动
				flag = 3;
			} else if (ty > 0) {
				//向下滑动
				flag = 4;
			}
		}
		//将当前坐标进行保存以进行下一次计算
		that.data.lastX = currentX;
		that.data.lastY = currentY;

		console.log('停止滑动', e)
		//停止滑动
		that.data.flag = 0;
	},
	/**
	*   swiper Index
	*/
	swipertabb(e) {
		this.setData({
			orderIndex: e.detail.current
		})
	},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1134597.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vs c++ 代码 c2362错误

c 开发调试bug 报错 c2362错误 goto语句的使用错误。 我的使用是这样的&#xff1a; goto __end; int nLen value; gto _end; int pBuffer value2;end:我的 nlen 和 pBuffer 直接初始化了&#xff0c;而 goto 与标签之间有任何初始化的语句都不可以&#xff0c;除非用括号把…

CTF-Crypto-第一天-常见编码and古典密码(入门学习笔记)(详)

文章目录 前言0x1 常见编码0x01 编码0x02 ASCII码0x03 Base系列编码0x04其他编码- URL编码-莫尔斯电码&#xff08;Morse Code&#xff09;-HTML实体编码-其他中的其他... 0x05编码与加密的关系 古典密码凯撒密码简单替换密码维吉尼亚密码栅栏密码其他古典密码替换加密移位加密…

c语言从入门到实战——分支和循环

分支和循环 前言1. if语句1.1 if1.2 else1.3 分支中包含多条语句1.4 嵌套if1.5 悬空else问题 2. 关系操作符3. 条件操作符4. 逻辑操作符&#xff1a;&& , || , &#xff01;4.1 逻辑取反运算符4.2 与运算符4.3 或运算符4.4 练习&#xff1a;闰年的判断4.5 短路 5. swit…

net::ERR_BLOCKED_BY_ADMINISTRATOR 问题定位与解决

本文基于谷歌浏览器调试手机应用 chrome://inspect/#devices 我有一个非常简单的广告页面&#xff0c;页面中有一张背景图&#xff0c;和一个按钮 他本应该是这样的 但实际上只显示了最下方的按钮&#xff0c;整个图片是空白的 页面仅在小米浏览器不显示背景图片&#xff0c;…

责任链模式应用案例

前几天系统商品折扣功能优化&#xff0c;同事采用了责任链模式重构了代码&#xff0c;现整理如下。 一、概念 责任链模式是为请求创建一个处理者对象的链条&#xff0c;所有处理者&#xff08;除最末端&#xff09;都含有下一个对象的引用从而形成一条处理链&#xff0c;该模…

怎么防止文件夹被删除、复制?

当文件夹中存放重要数据时&#xff0c;我们需要严格保护文件夹的安全&#xff0c;避免文件夹被复制、删除。那么&#xff0c;该怎么防止文件夹被删除、复制呢&#xff1f;下面我们就一起来了解一下。 ​文件夹隐藏 当文件夹被隐藏时&#xff0c;其他人无法发现文件夹&#xff…

Redis两种持久化方案RDB 和 AOF

Redis 作为一种非常流行的内存数据库&#xff0c;通过将数据保存在内存中&#xff0c;Redis 得以拥有极高的读写性能。但是一旦进程退出&#xff0c;Redis 的数据就会全部丢失。 为了解决这个问题&#xff0c;Redis 提供了 RDB 和 AOF 两种持久化方案&#xff0c;将内存中的数据…

排序算法-堆积树排序法(HeapSort)

目录 排序算法-堆积树排序法&#xff08;HeapSort&#xff09; 1、说明 2、算法分析 3、C代码 排序算法-堆积树排序法&#xff08;HeapSort&#xff09; 1、说明 堆积树排序法是选择排序法的改进版&#xff0c;可以减少在选择排序法中的比较次数&#xff0c;进而减少排序…

禾匠旧版对接微信小程序发货系统(发货信息管理 接口)

最近小程序如果是商家交易需要再小程序后台点击一下发货&#xff0c;特别麻烦&#xff0c;但是旧版的禾匠又没有这个功能&#xff0c;所以只能手动增加这个功能&#xff0c;但是每一个版本发货逻辑都不一样&#xff0c;大家只能自己手动去兼容一下&#xff0c;下面只是写了一个…

NewStarCTF2023week4-RSA Variation II

题目提示&#xff1a;"Schmidt Samoa" Schmidt-Samoa密码系统&#xff0c;像rabin加密一样&#xff0c;其安全性基于整数因式分解的难度。但 Rabin 解密时会得到四个解&#xff0c;而 Schmidt-Samor 得到的是唯一解。 N p*p*q&#xff0c;知道c、n、d 上脚本&…

【数据结构初阶】顺序表和链表(1)

顺序表和链表&#xff08;1&#xff09; 1.线性表2.顺序表2.1概念以及结构2.1.1静态顺序表2.1.2动态顺序表3.顺序表的实现3.1初始化内容3.2初始化函数3.3销毁函数3.4打印函数3.5扩容函数3.6尾插3.6尾删函数3.7头插函数3.8头删函数3.9查找函数3.10插入函数3.11删除函数3.12修改函…

Linux msend.pl配置

1.概述 1.1.说明​​​​​ 本文细描述Linux环境下(arm架构x64)基于perl的msend.pl配置,以实现根据msend.pl进行告警事件的发送。 1.2.环境说明 OS Version:RHEL7.6(arm架构x64) Perl Version: v5.16.3 1.3.msend.pl架构图 2.msend.pl配置 2.1.msend.pl配置 前提:以r…

基于机器学习与大数据的糖尿病预测 计算机竞赛

文章目录 1 前言1 课题背景2 数据导入处理3 数据可视化分析4 特征选择4.1 通过相关性进行筛选4.2 多重共线性4.3 RFE&#xff08;递归特征消除法&#xff09;4.4 正则化 5 机器学习模型建立与评价5.1 评价方式的选择5.2 模型的建立与评价5.3 模型参数调优5.4 将调参过后的模型重…

什么是React中的有状态组件(stateful component)和无状态组件(stateless component)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

2022年09月 Python(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 表达式len(“学史明理增信 ,读史终生受益”) > len(" reading history will benefit you ")的结果是?( ) A: 0 B: True C: False D: 1 答案:C 中文字符串"…

Spark【Spark Streaming】

1、基本数据源 1.1、文件流 在spark Shell 下运行&#xff1a; [lyhhadoop102 spark-yarn-3.2.4]$ spark-shell Setting default log level to "WARN". To adjust logging level use sc.setLogLevel(newLevel). For SparkR, use setLogLevel(newLevel). 2022-09-…

自动驾驶,从“宠儿”走进“淘汰赛”

从“一步到位”到场景、技术降维。从拼落地路径&#xff0c;到拼雷达、算力&#xff0c;再到如今的性价比之争&#xff0c;自动驾驶似乎变得愈发“接地气”。 作者|斗斗 编辑|皮爷 出品|产业家 比起去年&#xff0c;黄文欢和张放今年显得更加忙碌。 “自动驾驶赛道&…

Redis 配置文件(redis.conf)中文注释及说明

文章目录 一、概述二、觉见基础配置1.1 导入另一个配置文件1.2 添加Redis扩展1.3 绑定Redis服务在那些网卡上&#xff0c;也就是远程可以通过那个的IP地址访问。1.2 指定Redis服务监听端口1.2 最大分配内容大小1.2 后台服务方式运行1.2 日志记录文件1.2 添加扩展 三、完整配置文…

网络协议--DNS:域名系统

14.1 引言 域名系统&#xff08;DNS&#xff09;是一种用于TCP/IP应用程序的分布式数据库&#xff0c;它提供主机名字和IP地址之间的转换及有关电子邮件的选路信息。这里提到的分布式是指在Internet上的单个站点不能拥有所有的信息。每个站点&#xff08;如大学中的系、校园、…

XTU-OJ 1227-Robot

题目描述 假设在一个XOY坐标的平面上&#xff0c;机器人一开始位于原点&#xff0c;面向Y轴正方向。 机器人可以执行向左转&#xff0c;向右转&#xff0c;向后转&#xff0c;前进四个指令。 指令为 LEFT:向左转RIGHT:向右转BACK:向后转FORWORD n:向前走n(1≤n≤100)个单位 现在…