uniapp中页面滚动锚点位置及滚动到对应高度显示对应按钮

在这里插入图片描述
在这里插入图片描述

可以把页面代码和组件代码放自己项目里跑一下

页面代码

<template>
  <view class="Tracing-detail">
    
    <view class="title" v-for="i in 30">顶部信息</view>
    <!-- tab按钮 -->
    <Tab v-model="activeIndex" @change="scrollToTarget"></Tab>
    <!-- 产品详情 -->
    <view class="cpxq" id="cpxq">
      <view class="title" v-for="i in 30">产品详情</view>
    </view>
    <!-- 流程溯源 -->
    <view class="lcsy" id="lcsy">
      <view class="title" v-for="i in 30">流程溯源</view>
    </view>
    <!-- 主体信息 -->
    <view class="ztxx" id="ztxx">
      <view class="title" v-for="i in 30">主体信息</view>
    </view>
    <!-- 优品推荐 -->
    <view class="yptj" id="yptj">
      <view class="title" v-for="i in 30">优品推荐</view>
    </view>
  </view>
</template>

<script>
  import variables from 'uni.scss';
  import Tab from './components/Tab.vue';
  import Certificate from './components/Certificate.vue'
  import Flow from './components/Flow.vue'
  export default {
    components:{
      Tab,
      Certificate,
      Flow
    },
    data(){
      return {
        
        cpxqTop:0,
        lcsyTop:0,
        ztxxTop:0,
        yptjTop:0,
        activeIndex:1
      }
    },
    mounted() {
      this.init()
    },
    onPageScroll(e) {
        // e.scrollTop 是页面在垂直方向已滚动的距离(单位px)
        // console.log(e.scrollTop);
      if(e.scrollTop<this.lcsyTop){
        if(this.activeIndex!=1) this.activeIndex = 1
      }else if(e.scrollTop<this.ztxxTop){
        if(this.activeIndex!=2) this.activeIndex = 2
      }else if(e.scrollTop<this.yptjTop){
        if(this.activeIndex!=3) this.activeIndex = 3
      }else if(this.activeIndex!=4){
        if(this.activeIndex!=4) this.activeIndex = 4
      }
    },
    methods:{
      init(){
        this.getTopNumber()
      },
      getTopNumber(){
        // 创建查询对象
        const query = uni.createSelectorQuery().in(this);
        // 选择目标元素并获取其位置信息
        query.select('#cpxq').boundingClientRect(data => {
          if (data) {
            console.log(data,1);
          this.cpxqTop = data.top-30
          }
        }); // 执行查询
        query.select('#lcsy').boundingClientRect(data => {
          if (data) {
            console.log(data,2);
          this.lcsyTop = data.top-30//30为tab的高度
          }
        }); // 执行查询
        query.select('#ztxx').boundingClientRect(data => {
          if (data) {
            console.log(data,3);
          this.ztxxTop = data.top-30
          }
        }); // 执行查询
        query.select('#yptj').boundingClientRect(data => {
          if (data) {
            console.log(data,4);
          this.yptjTop = data.top-30
          }
        }).exec(); // 执行查询
      },
      scrollToTarget(i) {
        console.log(i);
        let number = ''
        if(i==1){
          number = this.cpxqTop
        }else if(i==2){
          number = this.lcsyTop
        }else if(i==3){
          number = this.ztxxTop
        }else if(i==4){
          number = this.yptjTop
        }
          uni.pageScrollTo({
            scrollTop: number, // pageScrollTop为页面当前已滚动的距离
            duration: 300 // 滚动动画时长
          });
      }
    }
  }
</script>

<style scoped lang="scss">
  .title{
    text-align: center;
  }
</style>

吸顶按钮组件代码

<template>
  <view class="tab-list">
    <view 
    :class="item.index==value?'tab-active': 'tab'" 
    v-for="(item,index) in list"
    @click="btnClick(item.index)">
      {{item.name}}
    </view>
  </view>
</template>

<script>
  export default {
    props:{
      value:{
        typeof:Number,
        default:1
      }
    },
    data(){
      return{
        list:[
          {
            index:1,
            name:'产品详情'
          },
          {
            index:2,
            name:'流程溯源'
          },
          {
            index:3,
            name:'主体信息'
          },
          {
            index:4,
            name:'优品推荐'
          }
        ]
      }
    },
    methods:{
      btnClick(i){
        this.$emit("input", i)
        this.$emit("change", i)
      }
    }
  }
</script>

<style scoped lang="scss">
  .tab-list{
    position: sticky;
    top: 0;
    z-index: 999;
    margin: 0 31rpx;
    height: 79rpx;
    padding: 0 17rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: red;
    background-size: 100% 100%;
    .tab-active {
      position: relative;
      height: 44rpx;
      font-family: YouSheBiaoTiHei;
      font-size: 35rpx;
      color: #FEE858;
      line-height: 44rpx;
      text-align: center;
      font-style: normal;
    }
    .tab {
      position: relative;
      height: 44rpx;
      font-family: YouSheBiaoTiHei;
      font-size: 35rpx;
      color: #FFFFFF;
      line-height: 44rpx;
      text-align: center;
      font-style: normal;
    }
  }
</style>

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

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

相关文章

计算机网络 Telnet远程访问交换机和Console终端连接交换机

一、实验要求和内容 1、配置交换机进入特权模式密文密码为“abcd两位班内学号”&#xff0c;远程登陆密码为“123456” 2、验证PC0通过远程登陆到交换机上&#xff0c;看是否可以进去特权模式 二、实验步骤 1、将一台还没配置的新交换机&#xff0c;利用console线连接设备的…

Vue实现防篡改水印的效果。删除元素无效!更改元素属性无效!支持图片、元素、视频等等。

1、演示 2、水印的目的 版权保护&#xff1a;水印可以在图片、文档或视频中嵌入作者、品牌或版权所有者的信息&#xff0c;以防止未经授权的复制、传播或使用。当其他人使用带有水印的内容时&#xff0c;可以追溯到原始作者或版权所有者&#xff0c;从而加强版权保护。 身份识…

在linux服务器上安装anaconda

遇到问题&#xff1a; 在linux服务器中查看当前有哪些虚拟环境&#xff0c;conda环境用不了&#xff0c;anaconda没有安装&#xff0c;所以要在linux服务器中安装虚拟环境 解决步骤如下&#xff1a; 1.首先下载anaconda的Linux版本的安装包 方法1&#xff1a;官网下载&#…

python如何写入csv

在使用python对文件操作的过程中&#xff0c;你肯定碰到过对csv文件的操作&#xff0c;下面就python对csv文件的操作进行详述。 CSV&#xff08;Comma-Separated Values&#xff09;逗号分隔符&#xff0c;也就是每条记录中的值与值之间是用分号分隔的。 打开CSV文件并写入一…

卷积通用模型的剪枝、蒸馏---剪枝篇(此处以deeplabv3+为例,可根据模型自行定制剪枝层)

之后的两篇文章是对前段时间工作的一个总结。 一、环境配置 1.1、文章以b导的代码为模板,环境配置比较简单(第二篇蒸馏篇结束后会放置剪枝蒸馏配置好的百度网盘链接),其他算法自行配置,在剪枝之前,需要保证算法能够在本地跑通。 B导链接: https://github.com/bubbliiiin…

2024年 前端JavaScript 进阶 第4天 End 笔记

4.1-内容和浅拷贝 4.2-递归函数 4.3-深拷贝实现 4.4-利用lodash和JSON实现深 4.5-异常处理-throw和try、catch 4.6-普通函数和箭头函数的this 4.7-call方法改变this指向 4.8-apply方法 4.9-bind方法以及总结 4.10-什么是防抖以及底层实现 4.11-什么是节流以及底层实现 4.12-节流…

华为2024年校招实习硬件-结构工程师机试题(四套)

华为2024年校招&实习硬件-结构工程师机试题&#xff08;四套&#xff09; &#xff08;共四套&#xff09;获取&#xff08;WX: didadidadidida313&#xff0c;加我备注&#xff1a;CSDN 华为硬件结构题目&#xff0c;谢绝白嫖哈&#xff09; 结构设计工程师&#xff0c;结…

Shotcut:免费且开源的优质视频剪辑工具

Shotcut&#xff1a;您的专业级免费开源视频编辑利器&#xff0c;助您轻松实现创意无限的剪辑梦想&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 Shotcut&#xff0c;一款广受赞誉的免费、开源跨平台视频编辑软件&#xff0c;以其卓越的功能性和易用性赢得了全球用户…

计算机视觉 | 基于二值图像数字矩阵的距离变换算法

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本实验基于 OpenCV 实现了二值图像数字矩阵的距离变换算法。首先生成一个 480x480 的黑色背景图像&#xff08;定义黑色为0&#xff0c;白色为1&#xff09;&#xff0c;在其中随机选择了三个白色像素点作为距离变换的原点&…

RTSP/Onvif安防视频EasyNVR平台 vs.多协议接入视频汇聚EasyCVR平台:设备分组的区别

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力&#xff0c;能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、W…

HWOD:投票统计

一、知识点 1、单词 候选人的英文是Candidate 投票的英文是vote 投票人的英文是voter 2、for循环 如果在for循环内将i置为n&#xff0c;结束该层循环后&#xff0c;for循环会先给i加1,然后再去判读i是否小于n&#xff0c;所以for循环结束后&#xff0c;i的值为n1 3、字符…

LeetCode 239. 滑动窗口最大值

滑动窗口最大值 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a;nums [1,3,-1,-3,…

用html实现一个动态的文字框

<!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>一个动态的文字框动画</title><link rel"stylesheet" href"./style.css"></head> <body> <link rel…

Centos7下docker的jenkins下载并配置jdk与maven【图文教程】

个人记录 进入目录 cd /usr/local/JDK下载与配置 OpenJDK官网 下载安装 wget https://download.java.net/openjdk/jdk18/ri/openjdk-1836_linux-x64_bin.tar.gz解压 tar -zxvf openjdk-1836_linux-x64_bin.tar.gz ls ls jdk-18/编辑配置文件 vim /etc/profile配置环境变…

[C++]让C++的opencv库支持写出h264格式视频

当我们写下面测试代码时候&#xff1a; #include <opencv2/opencv.hpp>int main() {cv::VideoCapture cap("E:\\car.mp4"); // 打开默认摄像头if (!cap.isOpened()) {std::cout << "读取完毕!" << std::endl;return -1;}double fps ca…

上线数日暴涨600%市值直逼节点猴,Runestone符石为何成第二大比特币NFT?

NodeMonkes&#xff08;节点猴&#xff09;市值超越BAYC成为第二大NFT之际&#xff0c;凭借着不断上涨的市场热度和人气&#xff0c;符文项目Runestone在空投数日后也成功跻身为比特币生态市值第二大NFT。Runestone高共识背后的动因有哪些&#xff1f;又有哪些策略具有借鉴意义…

Dubbo的使用和相关概念

参考官网 大致流程图 1. 初始化项目 参考官网进行项目的初始化即可。 2. 相关配置 主要参考官网&#xff1a;这里仅给出提示 application.yml dubbo:application:name: dubbo-springboot-demo-consumerprotocol:name: dubboport: -1registry:address: zookeeper://${zo…

考研数学|武忠祥各阶段用书搭配及分享

看到有人问武忠祥老师&#xff0c;不请自来 武忠祥老师&#xff0c;绝对的宝藏老师&#xff0c;我在考研强化阶段的时候听过他的强化课程&#xff0c;听完之后&#xff0c;很多问题都想通了&#xff0c;所以&#xff0c;如果有人想问武忠祥老师行不行&#xff0c;那我就一个字…

基于FPGA的以太网相关文章导航

首先需要了解以太网的一些接口协议标准&#xff0c;常见的MII、GMII、RGMII时序&#xff0c;便于后续开发。 【必读】从MII到RGMII&#xff0c;一文了解以太网PHY芯片不同传输接口信号时序&#xff01; 介绍一款比较老的以太网PHY芯片88E1518&#xff0c;具有RGMII接口&#xf…

代码学习记录40---动态规划

随想录日记part40 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.04.10 主要内容&#xff1a;今天开始要学习动态规划的相关知识了&#xff0c;今天的内容主要涉及&#xff1a; 买卖股票的最佳时机加强版。 123.买卖股票的最佳时机III 188.买卖股票的最佳时机…