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.mzph.cn/news/643380.shtml

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

相关文章

HarmonyOS鸿蒙应用开发( 四、重磅组件List列表组件使用详解)

List列表组件&#xff0c;是一个非常常用的组件。可以说在一个应用中&#xff0c;它的身影无处不在。它包含一系列相同宽度的列表项&#xff0c;适合连续、多行呈现同类数据&#xff0c;如商品列表、图片列表和和文本列表等。ArkUI 框架采用 List 容器组件创建列表&#xff08;…

某国有企业后备人才培养机制建设

某电力勘测设计院始建于1958年&#xff0c;是中国电力建设集团有限公司旗下的大型电力工程咨询公司。伴随着中国电力事业的发展&#xff0c;已发展为具备甲级电力工程规划、咨询、勘测、设计、总承包、环境及安全管理评价、地质灾害勘察、评估与治理、光电建筑一体化及发电专项…

大数据学习之Flink算子、了解DataStream API(基础篇一)

DataStream API &#xff08;基础篇&#xff09; 注&#xff1a; 本文只涉及DataStream 原因&#xff1a;随着大数据和流式计算需求的增长&#xff0c;处理实时数据流变得越来越重要。因此&#xff0c;DataStream由于其处理实时数据流的特性和能力&#xff0c;逐渐替代了DataSe…

Windows下安装达梦8开发版数据库

达梦数据库属于国产主流数据库之一&#xff0c;本文记录WIndows下安装最新的达梦8数据库的过程。   达梦官网&#xff08;参考文献1&#xff09;下载开发版&#xff08;X86平台&#xff09;版安装包&#xff0c;如下图所示&#xff1a; 解压安装包后&#xff0c;其中包含ISO文…

Unity中UGUI在Mask剪裁粒子特效的实现

在Unity使用Mask是剪裁不了粒子特效的&#xff0c;之前有想过RenderTexture来实现&#xff0c;不过使用RenderTexture不适合用于很多个特效&#xff0c;因为RenderTexture依赖Camera的照射&#xff0c;如果在背包中每种道具都有不同的特效&#xff0c;那使用RenderTexture则需要…

Armv8-M的TrustZone技术之SAU寄存器总结

每个SAU寄存器是32位宽。下表显示了SAU寄存器概要。 5.1 SAU_CTRL register SAU_CTRL寄存器的特征如下图和表所示&#xff1a; 5.2 SAU_TYPE register 5.3 SAU_RNR register 5.4 SAU_RBAR register 5.5 SAU_RLAR register 5.6 SAU区域配置 当SAU启用时&#xff0c;未由已启用…

【技术】SpringBoot 接口怎么加密解密

1. 介绍 在我们日常的Java开发中&#xff0c;免不了和其他系统的业务交互&#xff0c;或者微服务之间的接口调用 如果我们想保证数据传输的安全&#xff0c;对接口出参加密&#xff0c;入参解密。 但是不想写重复代码&#xff0c;我们可以提供一个通用starter&#xff0c;提…

go 依赖注入设计与实现

在现代的 web 框架里面&#xff0c;基本都有实现了依赖注入的功能&#xff0c;可以让我们很方便地对应用的依赖进行管理&#xff0c;同时免去在各个地方 new 对象的麻烦。比如 Laravel 里面的 Application&#xff0c;又或者 Java 的 Spring 框架也自带依赖注入功能。 今天我们…

C++高精度问题

高精度前言 C中int不能超过2^31-1&#xff0c;最长的long long也不能超过2^63-1,所以我们在题目中如果碰到了很长很长的数&#xff0c;并且需要进行大数运算时&#xff0c;就需要高精度存储。 高精度总体思路 由于int和long long的限制&#xff0c;我们要想存放很长的数就需…

Power Apps 向Power Automate传一个数组参数

Power Apps传Power Automate数组参数 背景Power Apps传参方法画布开发我们现在power apps中设置一个集合**ArrCollect**准备一个按钮 Power Automate接收总结画布流 背景 我们通常会从Power Apps界面传递参数给Flow中&#xff0c;但是很多时候仅仅是一个字符串类型的已经不适用…

二进制计算

二进制的引入 十进制规则:满10进1&#xff0c;由数字0到9组成。 而所谓十六进制&#xff0c;八进制&#xff0c;二进制的规则也是类似。 这里为了区分十六进制和八进制&#xff0c;十六进制前面会加上0x&#xff0c;八进制前面会加个0作为区分 而二进制的规则类似于十进制&…

PLC协议转BACnet网关BA107

随着通讯技术和控制技术的发展&#xff0c;为了实现楼宇的高效、智能化管理&#xff0c;集中监控管理已成为楼宇智能管理发展的必然趋势。在此背景下&#xff0c;高性能的楼宇暖通数据传输解决方案——协议转换网关应运而生&#xff0c;广泛应用于楼宇自控和暖通空调系统应用中…

精品基于Uniapp+springboot智能家居环境检测App

《[含文档PPT源码等]精品基于Uniappspringboot智能家居环境检测App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;springboot、ssm …

HTTP3/QUIC 性能测试与配套组件

背景 最近一年很多关于QUIC的文章层出&#xff0c;但是发现一个问题&#xff0c;这些文章都是在介绍QUIC或HTTP3是怎样的一个东西&#xff0c;以及它的优点和机制&#xff0c;将它夸的近乎上天了。然而有心的人估计会亲手做一些测试&#xff0c;就会发现这个被捧上天的东西性能…

宝塔+nextcloud+docker+Onlyoffice 全开启https

折腾了我三天的经验分享 1.宝塔创建网站 nextcloud版本为28.0.1 php8.2 &#xff0c;导入nextcloud绑定域名对应的证书 &#xff0c;不用创建mysql 因为nextcloud 要求是mariadb:10.7 宝塔里没有&#xff0c;就用docker安装一个 端口设置为3307 将数据库文件映射出来/ww…

Leetcode刷题(二十八)

找出字符串中第一个匹配项的下标&#xff08;Easy&#xff09; 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返…

基于springboot+vue的“衣依”服装销售平台系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 研究背景…

VSCode Debug 参数设置说明

如果想在vscode中debug一个项目&#xff0c;比如python3 run.py --args 这个时候你需要着重关注几个参数&#xff0c;参数用两个双引号分开&#xff0c;不能有空格。 cwd :运行代码的基础目录env: 设置环境变量 PYTHONPATH&#xff1a; 设置项目用到的模块搜索路径&#xff…

在PyCharm中安装GitHub Copilot插件,login之后报出如下错误:

Sign in failed. Reason: Request signInInitiate failed with message: connect ECONNABORTED 20.205.243.166:443, request id: 7, error code: -32603 前提&#xff1a; 设置网址&#xff1a;https://github.com/settings/copilot&#xff0c;已设置为允许 或者&#xff1…

工业智能网关储能物联网应用实现能源的高效利用及远程管理

储能电力物联网是指利用物联网技术和储能技术相结合&#xff0c;实现对电力系统中各种储能设备的智能管理和优化控制。随着可再生能源的不断发展和应用&#xff0c;电力系统面临着越来越大的电力调度和储能需求而储能电力物联网的出现可以有效解决这一问题&#xff0c;提高电力…