app如何实现悬浮框滚动到那个模块定位到那。

如图:

使用uniapp内置方法  onPageScroll   获取到滚动了多少。

其实拿到屏幕滚动多少就很简单了,下面是思路。

tap栏切换效果代码就不贴了。直接贴如何到那个模块定位到哪,和点击定位到当前模块。

<view v-if="show" class="tab-box">
            <view class="overflowView">
            <view class="tab-item" @click="testTabClick(index)" :class="tabIndex == index?'active':''" v-for="(item,index) in tabList" :key="index">
                {{item.name}}
            </view>
            </view>
        </view>

onPageScroll(res) {
                let scrollTopone  = 650
                let scrollToper  = 1150
                let scrollTopthree = 1550
                let scrollTopfour  = 1750
                let scrollTopfive  = 1850
                console.log(res.scrollTop);

                 这样判断的意思是多少到多少之间,滚动到相应的位置,高亮对应tap栏。
                if (res.scrollTop >= 300 && res.scrollTop <= scrollTopone) {
                    this.tabIndex = 1
                }else if (res.scrollTop >= 650 && res.scrollTop <= scrollToper) {
                    this.tabIndex = 2
                }else if (res.scrollTop >= 1150 && res.scrollTop <= scrollTopthree) {
                    this.tabIndex = 3
                }else if (res.scrollTop >= 1550 && res.scrollTop <= scrollTopfour) {
                    this.tabIndex = 4
                }else if (res.scrollTop >= 1750 && res.scrollTop <= scrollTopfive) {
                    this.tabIndex = 5
                }else {
                    this.tabIndex = 6
                }
                if (res.scrollTop >= 300) {
                    this.show= true
                }else if (res.scrollTop < 300 ) {
                    this.show= false
                }
            },

点击那个模块定位到当前模块。

testTabClick(index) {
                if (index == 0) {
                    document.documentElement.scrollTop = 0
                }else if (index == 1) {
                    document.documentElement.scrollTop = 300
                }else if (index == 2) {
                    document.documentElement.scrollTop = 650
                }else if (index == 3) {
                    document.documentElement.scrollTop = 1150
                }else if (index == 4) {
                    document.documentElement.scrollTop = 1550
                }else if (index == 5) {
                    document.documentElement.scrollTop = 1750
                }else if (index == 6) {
                    document.documentElement.scrollTop = 2000
                }
                this.tabIndex = index
                console.log(this.tabIndex);
            },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

08-微服务Seata分布式事务使用

一、分布式事务简介 1.1 概念 事务ACID&#xff1a; A&#xff08;Atomic&#xff09;&#xff1a;原子性&#xff0c;构成事务的所有操作&#xff0c;要么都执行完成&#xff0c;要么全部不执行&#xff0c;不可能出现部分成功部分失 败的情况。 C&#xff08;Consistency&…

网络协议与攻击模拟_06攻击模拟SYN Flood

一、SYN Flood原理 在TCP三次握手过程中&#xff0c; 客户端发送一个SYN包给服务器服务端接收到SYN包后&#xff0c;会回复SYNACK包给客户端&#xff0c;然后等待客户端回复ACK包。但此时客户端并不会回复ACK包&#xff0c;所以服务端就只能一直等待直到超时。服务端超时后会…

麒麟系统—— openKylin 安装到虚拟机以及开放SSH通过工具连接

麒麟系统—— openKylin 安装到虚拟机以及开放SSH通过工具连接 1. 在VMware中安装openKylin麒麟系统步骤1&#xff1a;准备VMware环境步骤2&#xff1a;创建新的虚拟机步骤3&#xff1a;安装openKylin麒麟系统步骤4&#xff1a;调整分别率步骤5&#xff1a;安装SSH 2. 使用Open…

Textual Inversion、DreamBooth、LoRA、InstantID:从低成本进化到零成本实现IP专属的AI绘画模型

2023年7月份国内有一款定制写真AI工具爆火。一款名为妙鸭相机的AI写真小程序&#xff0c;成功在C端消费者群体中出圈&#xff0c;并在微信、微博和小红书等平台迅速走红&#xff0c;小红书上的话题Tag获得了330多万的浏览量&#xff0c;相关微信指数飙升到了1800万以上。 其他…

kali安装LAMP和DVWA

LANMP简介 LANMP是指一组通常用来搭建动态网站或者服务器的开源软件&#xff0c;本身都是各自独立的程序&#xff0c;但是因为常被放在一起使用&#xff0c;拥有了越来越高的兼容度&#xff0c;共同组成了一个强大的Web应用程序平台。 L:指Linux&#xff0c;一类Unix计算机操作…

java基础加强(1)

1.xml 1.1概述【理解】 万维网联盟(W3C) 万维网联盟(W3C)创建于1994年&#xff0c;又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。 建立者&#xff1a; Tim Berners-Lee (蒂姆伯纳斯李)。 是Web技术领域最具权威和影响力的国际中立性技术标准机构。 到目前为…

写Shell以交互方式变更Ubuntu的主机名

以下是一个简单的 Bash 脚本&#xff0c;用于以交互方式更改 Ubuntu 20 系统的主机名&#xff1a; 1#!/bin/bash 2 3# 提示用户输入新的主机名 4read -p "请输入新的系统名称&#xff08;主机名&#xff09;: " new_hostname 5 6# 检查是否输入了新的主机名 7if [ -…

猫用空气净化器哪些好?五款宠物空气净化推荐!

如今&#xff0c;养宠物的家庭越来越多了&#xff01;家里因此变得更加温馨&#xff0c;但同时也会带来一些问题&#xff0c;比如异味和空气中的毛发可能会对健康造成困扰。 为了避免家中弥漫着异味&#xff0c;特别是来自宠物便便的味道&#xff0c;一款能够处理家里异味的宠…

python基础学习-03 安装

python3 可应用于多平台包括 Windows、Linux 和 Mac OS X。 Unix (Solaris, Linux, FreeBSD, AIX, HP/UX, SunOS, IRIX, 等等。)Win 9x/NT/2000Macintosh (Intel, PPC, 68K)OS/2DOS (多个DOS版本)PalmOSNokia 移动手机Windows CEAcorn/RISC OSBeOSAmigaVMS/OpenVMSQNXVxWorksP…

npm install运行报错npm ERR! gyp ERR! not ok问题解决

执行npm install的时候报错&#xff1a; npm ERR! path D:..\node_modules\\**node-sass** npm ERR! command failed ...npm ERR! gyp ERR! node -v v20.11.0 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok根据报错信息&#xff0c;看出时node-sass运行出现…

图像处理算法:白平衡、除法器、乘法器~笔记

参考&#xff1a; 基于FPGA的自动白平衡算法的实现 白平衡初探 (qq.com) FPGA自动白平衡实现步骤详解-CSDN博客 xilinx 除法ip核&#xff08;divider&#xff09; 不同模式结果和资源对比&#xff08;VHDL&ISE&#xff09;_ise除法器ip核-CSDN博客 数…

绝地求生:本周三停机维护更新4小时: RASH悲喜套装即将下线!

本周三将迎来停机维护更新四小时~&#xff0c;同时游戏商城内RASH悲喜联名套装即将下线&#xff0c;同时空投签到任务和荣都地图翻牌任务即将下线~ 预计维护时间: 2024年1月24日08:00~12:00 本周地图轮换情况 (1月24日 ~ 1月31日) 可自主选择地图的地区:艾伦格、泰戈、帝斯顿、…

前沿重器[41] | 综述-面向大模型的检索增强生成(RAG)

前沿重器 栏目主要给大家分享各种大厂、顶会的论文和分享&#xff0c;从中抽取关键精华的部分和大家分享&#xff0c;和大家一起把握前沿技术。具体介绍&#xff1a;仓颉专项&#xff1a;飞机大炮我都会&#xff0c;利器心法我还有。&#xff08;算起来&#xff0c;专项启动已经…

JavaScript入门分享

文章目录 一、JavaScript简介二、第一个JavaScript案例三、在浏览器中执行JavaScript代码四、JavaScript的输出方法五、JavaScript的语法六、JavaScript的数据类型七、JavaScript的定义变量/函数八、热门文章 一、JavaScript简介 JavaScript是一种高级编程语言&#xff0c;用于…

假期刷题打卡--Day12

1、MT1128骰子的反面 小码哥抛出一个六面骰子。每个面上都印有一个数字&#xff0c;数字在1到6之间。输入正面的数字&#xff0c;输出对面的数字。 其他情况输出-1。 格式 输入格式&#xff1a; 输入为整型 输出格式&#xff1a; 输出为整型 样例 1 输入&#xff1a; …

【CANoe使用大全】——工程新建

文章目录 1、硬件连接2、通道配置2.1通道协议选择2.2映射通道配置2.3.波特率采样点配置 1、硬件连接 前提条件&#xff1a;软件、驱动均已经安装完成 硬件通过UBS接入电脑&#xff0c;Status状态灯为黄色闪烁状态说明硬件设备与电脑连接正常 2、通道配置 2.1通道协议选择 …

npm i 报一堆版本问题

1&#xff0c;先npm cache clean --force 再下载 插件后缀加上 --legacy-peer-deps 2&#xff0c; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz failed, reason…

Linux之安装配置VCentOS7+换源

目录 一、安装 二、配置 三、安装工具XSHELL 3.1 使用XSHELL连接Linux 四、换源 前言 首先需要安装VMware虚拟机&#xff0c;在虚拟机里进行安装Linux 简介 Linux&#xff0c;一般指GNU/Linux&#xff08;单独的Linux内核并不可直接使用&#xff0c;一般搭配GNU套件&#…

SQL注入示例

例一、基础SQL注入&#xff1a;load_file读文件 CISP-PTE 认证考试 首先是有单引号和括号的&#xff0c;首要是要闭合&#xff0c;然后回显点是在-1的位置&#xff0c;读取文件上面的key的话使用的是load_file(/tmp/360/key) id-1)%09ununionion%09select%091,2,3,load_file…

Open3D 最小二乘拟合二维直线(拉格朗日乘子法)

目录 一、算法原理二、代码实现三、结果展示Open3D 最小二乘拟合二维直线(拉格朗日乘子法)由CSDN点云侠原创。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 平面直线的表达式为: y = k x
最新文章