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

news/2024/7/20 1:40:45 标签: 小程序, 1024程序员节

整个红色区域为可滑动区域,数字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.niftyadmin.cn/n/5117667.html

相关文章

【PG】PostgreSQL字符集

目录 设置字符集 1 设置集群默认的字符集编码 2 设置数据库的字符集编码 查看字符集 1 查看数据字符集编码 2 查看服务端字符集 3 查看客户端字符集 4 查看默认的排序规则和字符分类 被支持的字符集 PostgreSQL里面的字符集支持你能够以各种字符集存储文本&#xff0c…

mysql json数据类型 相关函数

创建JSON文本的函数 1.JSON_ARRAY&#xff08;转换json数组&#xff09; 2.JSON_OBJECT&#xff08;转换json对象&#xff09; 3.JSON_QUOTE&#xff08;转义字符串&#xff09; 搜索JSON文本的函数 1.JSON_CONTAINS&#xff08;json当中是否包含指定value&#xff09; 2.J…

无用自动化测试?

自动化测试&#xff0c;特别是UI级的自动化测试是一件费力而不讨好的事情。自动化测试使得测试人员疲于应付&#xff0c;朝不顾夕&#xff0c;如坐针毡&#xff0c;苟延残喘。UI级的自动化测试看起来很美好&#xff0c;就像罂粟&#xff0c;如果你经不住诱惑冒然尝试&#xff0…

爬虫知识之BeautifulSoup库安装及简单介绍

一. 前言 在前面的几篇文章中我介绍了如何通过Python分析源代码来爬取博客、维基百科InfoBox和图片,其文章链接如下: 其中核心代码如下: # coding=utf-8 import urllib import re #下载静态HTML网页 url=http://www.csdn.net/ content = urllib.urlopen(url).read…

重入漏洞EtherStore

重入漏洞 // SPDX-License-Identifier: MIT pragma solidity ^0.8.13;contract EtherStore {mapping(address > uint) public balances;function deposit() public payable {balances[msg.sender] msg.value;}function withdraw() public {uint bal balances[msg.sender]…

主题模型--BERTopic

一、概念 1.1 主题模型 主题模型&#xff08;Topic Model&#xff09;是自然语言处理中的一种常用模型&#xff0c;是一种无监督学习方法&#xff0c;它用于从大量文档中自动提取主题信息。 主题模型的核心思想是&#xff0c;每篇文档都可以看作是多个主题的混合&#xff0c…

基于卷积神经网络的乳腺癌分类 深度学习 医学图像 计算机竞赛

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

Jmeter接口测试(十一):BeanShell脚本详解

BeanShell简介 BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些 语法和方法&#xff1b; BeanShell是一种松散类型的脚本语言&#xff1b; BeanShell是用Java写成的&#xff0c;一个小型的、免费的、可以下载、嵌入式的 Java源代码解释器&#xff0c;具…