小程序 swiper滑动

整个红色区域为可滑动区域,数字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 = thisconsole.log(e)that.data.flag = 0;that.data.lastX = e.changedTouches[0].pageX;that.data.lastY = e.changedTouches[0].pageY;},/***   滑动结束*/touchEnd(e) {let that = thislet { flag, lastX, lastY, orderIndex, orderTip, orderTip2 } = that.dataif (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.rhkb.cn/news/168666.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从昏暗到明亮—改善照明环境,提升编程效率

作为一名程序员博主&#xff0c;长时间写代码、写博客&#xff0c;对着电脑屏幕的生活方式已经渐渐成为了我的日常。 然而&#xff0c;这种生活方式却给我的眼睛带来了相当大的压力。每当一天的工作结束&#xff0c;我的眼睛总是感到干涩、疲劳&#xff0c;让我感到不舒适。&am…

基于C语言 --- 自己写一个通讯录

C语言程序设计笔记---039 C语言之实现通讯录1、介绍C/C程序的内存开辟2、C语言实现通讯录2.1、ContactMain.c程序大纲2.2、Contact2.h2.3、Contact2.c2.3.1 InitContact( )初始化通讯录函数2.3.2 AddContact( )添加联系人和CheckCapaticy( )检查容量函数2.3.3、ShowContact( )显…

模式识别——高斯分类器

模式识别——高斯分类器 需知定义特殊情况&#xff08;方差一致&#xff09;Sigmoid 需知 所有问题定义在分类问题下&#xff0c;基于贝叶斯决策 定义 条件概率为多元高斯分布&#xff0c;此时观测为向量 X X 1 , X 2 , . . . , X n X{X_1,X_2,...,X_n} XX1​,X2​,...,Xn​…

Docker Service 创建

Docker Swarm Mode Docker Swarm 集群搭建 Docker Swarm 节点维护 Docker Service 创建 service 只能依附于 docker swarm 集群&#xff0c;所以 service 的创建前提是&#xff0c;swarm 集群搭建完毕。 1. 创建 service docker service create 命令用于创建 service&#xff…

【C++项目】高并发内存池第二讲中心缓存CentralCache框架+核心实现

CentralCache 1.框架介绍2.核心功能3.核心函数实现介绍3.1SpanSpanList介绍3.2CentralCache.h3.3CentralCache.cpp3.4TreadCache申请内存函数介绍3.5慢反馈算法 1.框架介绍 回顾一下ThreadCache的设计&#xff1a; 如图所示&#xff0c;ThreadCache设计是一个哈希桶结构&…

前端领域的插件式设计

插件&#xff0c;是一个常见的概念。 例如&#xff0c;当我们需要把我们前端代码中的 css 样式提取打包&#xff0c;我们可以用 webpack 的 mini-css-extract-plugin&#xff0c;或者你如果用 rollup 的话&#xff0c;可以选择 rollup-plugin-postcss。 再比如我们可以给 bab…

RDB.js:适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js 是适用于 Node.js 和 Typescript 的终极对象关系映射器&#xff0c;可与 Postgres、MS SQL、MySQL、Sybase SAP 和 SQLite 等流行数据库无缝集成。无论您是使用 TypeScript 还是 JavaScript&#xff08;包括 CommonJS 和 ECMAScript&#xff09;构建应用程序&#xff0c…

X32位汇编和X64位区别无参函数分析(一)

前言 一、X32汇编函数无参无返回分析 二、X64汇编函数无参无返回分析 总结 前言 提示&#xff1a;以下是个人学习总结&#xff1a;如有错误请大神指出来&#xff0c;只供学习参考&#xff0c;本内容使用使用VS2017开发工具&#xff1a;语言是C&#xff0c;需要一些常见的汇编指…

MySQL1——喵喵期末不挂科

宝宝&#xff0c;你不点个赞吗&#xff1f;不评个论吗&#xff1f;不收个藏吗&#xff1f; 最后的最后&#xff0c;关注我&#xff0c;关注我&#xff0c;关注我&#xff0c;你会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的很重要…

阶段六-Day04-MyBatis2

一、别名 Alias 1. 为什么使用别名 一般映射文件中会包含大量<select>标签, 每个<select>中都需要配置resultType"com.bjsxt.pojo.People"&#xff0c;MyBatis提供了别名机制可以对某个类起别名或给某个包下所有类起别名&#xff0c;简化resultType取值…

sklearn-6算法链与管道

思想类似于pipeline&#xff0c;将多个处理步骤连接起来。 看个例子&#xff0c;如果用MinMaxScaler和训练模型&#xff0c;需要反复执行fit和tranform方法&#xff0c;很繁琐&#xff0c;然后还要网格搜索&#xff0c;交叉验证 1 预处理进行参数选择 对于放缩的数据&#x…

性能测试 —— Jmeter 命令行详细

我们在启动Jmeter时 会看见&#xff1a;Don’t use GUI mode for load testing !, only for Test creation and Test debugging.For load testing, use CLI Mode (was NON GUI) 这句话的意思就是说&#xff0c;不要使用gui模式进行负载测试&#xff0c;gui模式仅仅是创建脚本…

Unity 通过jar包形式接入讯飞星火SDK

最近工作上遇到了要接入gpt相关内容的需求&#xff0c;简单实现了一个安卓端接入讯飞星火的UnitySDK。 或者也可以接入WebSocket接口的。本文只讲安卓实现 我使用的Unity版本为2021.3.27f1c2 Android版本为4.2.2 1.下载SDK 登陆讯飞开放平台下载如图所示SDK 2.新建安卓工程…

【广州华锐互动】关于物理力学的3D实验实操平台

在科学的广阔领域中&#xff0c;物理力学是一个至关重要的分支&#xff0c;它探索了物体在力作用下的运动规律。然而&#xff0c;传统的物理实验往往需要复杂的设备和大量的操作&#xff0c;这对于学生来说是一项巨大的挑战。为了解决这个问题&#xff0c;广州华锐互动开发了物…

django 商品及购物车逻辑实现

基于类视图模式实现商品分类菜单接口开发 创建菜单子应用 python manage.py startapp menu测试 apps/menu/views from django.http import HttpResponse from django.views import Viewclass GoodsMainMenu(View):def get(self,request):print("get请求")return …

二叉搜索树进阶--AVL树详细实现过程

目录 AVL树概念AVL树实现AVL树基础结构插入插入&#xff1a;左旋实现插入&#xff1a;右旋实现 AVL树完整实现代码&#xff1a; 之前学习到的二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找元素相当于在顺序表中…

实现Traefik工具Dashboard远程访问:搭建便捷的远程管理平台

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…

HTML笔记-狂神

1. 初识HTML 什么是HTML&#xff1f; Hyper Text Markup Language : 超文本标记语言 超文本包括&#xff1a;文字、图片、音频、视频、动画等 目前使用的是HTML5&#xff0c;使用 W3C标准 W3C标准包括&#xff1a; 结构化标准语言&#xff08;HTML、XML&#xff09; 表现标…

大二第三周总结(算法+生活)

算法&#xff1a; 题目&#xff1a;有效的括号 这个题目也是做过很多回了。主要就是数据结构中”栈“的应用&#xff0c;先进后出。 解题思路&#xff1a; 1.创建 Map 哈希表形成键值对映射 2.进行遍历字符串 在遍历过程中 如果 遍历到的字符c 是左括号&#xff0c;则入栈 pu…

大小端字节序存储

大小端字节序存储&#xff1a;是以字节为单位讨论它在内存中的存储顺序&#xff0c;而不是更小的二进制位 例如&#xff1a; int main() {int a 0x11223344;return 0; }a在内存中的存储16进制为44 33 22 11&#xff0c;两个16进制为一个单位进行存储&#xff0c;而两个十六进…