首页 > 其他分享 >uview2 tabs左右滑动切换

uview2 tabs左右滑动切换

时间:2024-04-23 10:46:46浏览次数:20  
标签:touches tabs deltaY 用户 deltaX 滑动 event uview2

首先思路:在滑动区域监听事件,记录用户的起始位置,根据用户滑动的坐标判断出用户操作。

<view class="body" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">

新增三个事件,用于监听用户操作

touchStart(event) {
                // 记录触摸起始点的横坐标,纵坐标
                this.startX = event.touches[0].clientX;
                this.startY = event.touches[0].clientY;
            },
            touchMove(event) {
                // 计算滑动距离
                const currentX = event.touches[0].clientX;
                this.deltaX = currentX - this.startX;
                const currentY = event.touches[0].clientY;
                this.deltaY = currentY - this.startY;
            },
            touchEnd() {
                // 判断滑动方向
                if (Math.abs(this.deltaY) <= 100) { 
                    if (this.deltaX > 20) {
                        console.log('向右滑动逻辑', this.deltaX, this.deltaY);
                    } else if (this.deltaX < -20) {
                        console.log('向左滑动逻辑', this.deltaX, this.deltaY);
                    }
                    this.deltaX = 0;//将存储移动距离清空
                    this.deltaY = 0;
                }
            },                

增加Y轴判断,避免用户在上下滑动时触发左右滑动,当上下滑动小于一定距离时,再触发左右切换事件

标签:touches,tabs,deltaY,用户,deltaX,滑动,event,uview2
From: https://www.cnblogs.com/Allen-Xiebro/p/18152303

相关文章

  • 2024-04-21---真题--一个字符串中的最长重复子串(滑动窗口变种)
    真题-一个字符串中的最长重复子串(滑动窗口变种)题目:思路:首先这不是求公共子串,所以不需要动态规划记录。然后一个string相当于就是一个Char[],所以直接滑动窗口来枚举最好做。说白了,这道题就是求abc|abc的问题。其实就是可以看作是一个大的滑动窗口(包含两个小的窗口),并且大的窗口......
  • 2024-04-18---中等题---无重复字符的最长子串(滑动窗口)
    无重复字符的最长子串(滑动窗口)题目:思路:一暴力法:特殊情况,长度为0或者1声明每次位置的最大长度,和最大的最大值(返回值)双层循环,有点暴力二滑动窗口:​ 基本概念:维持一个窗口(可以理解为队列),当新进来的元素与前面的重复,则把重复的元素及之前的元素全部忽略(可以理解为......
  • 点击菜单生成tabs(vue3.0)
    1.安装vuex npminstallvuex@next--save在main.js中引用vuex2.在main.js同级目录新建store/store.js文件 代码:import{createStore}from'vuex'exportdefaultcreateStore({ state:{ tabsList:[] }, mutations:{ addTab(state,tab){ //判断是否......
  • 动态规划、回溯、BFS、二分、滑动窗口总结
    动态规划动态规划的核心问题:重叠子问题,最优子结构,状态转移方程动态规划与记忆递归的区别:记忆递归为自顶而上的递归剪枝,动态规划为自底向上的循环迭代;正确的状态转移方程+dp[]数组:确定状态(原问题和子问题中变化的变量)->确定dp数组的定义dp[i]->确定当前状态的'选择'并确定......
  • 滑动窗口
    长度最小:  滑动窗口publicintminSubArrayLen(inttarget,int[]nums){    intstart=0;    intend=0;    intres=Integer.MAX_VALUE;    intsum=0;    while(end<nums.length){    sum+=nums[end];    ......
  • 鸿蒙HarmonyOS实战-ArkUI组件(Tabs)
    ......
  • 构建动态交互式H5导航栏:滑动高亮、吸顶和锚点导航技巧详解
    功能描述产品要求在h5页面实现集锚点、吸顶及滑动高亮为一体的功能,如下图展示的一样。当页面滑动时,内容区域对应的选项卡高亮。当点击选项卡时,内容区域自动滑动到选项卡正下方。布局设计css布局为了更清晰的描述各功能实现的方式,将页面布局进行了如下的拆分。★最外层的元......
  • HarmonyOS-基础之Tabs组件
    1、Tabs的基本使用@Entry@ComponentstructIndex{privatecontroller:TabsController=newTabsController();//声明周期函数aboutToAppear(){//页面加载1s后跳转到商城setTimeout(()=>{this.controller.changeIndex(1)},1000)}......
  • HarmonyOS NEXT应用开发案例——滑动页面信息隐藏与组件位移效果
    介绍在很多应用中,向上滑动"我的"页面,页面顶部会有如下变化效果:一部分信息逐渐隐藏,另一部分信息逐渐显示,同时一些组件会进行缩放或者位置移动。向下滑动时则相反。效果图预览使用说明向上滑动页面,出现如下变化:用户名/选择身份/设置图标/客服图标逐渐隐藏,用户头像尺寸逐渐缩小......
  • 实用算法模板——滑动窗口
    为了更好的说明这个问题,我们借用acWing上的一道题目模拟样例:解法一:使用stl中的双端队列求解解法二:使用数组模拟队列,运行速度更快如果还有疑问,可参考:C15【模板】单调队列滑动窗口最值_哔哩哔哩_bilibili希望对你有所帮助,感谢查看!......