Taro+vue3 监听当前的页面滚动的距离

1.需求

想实现一个这样的效果

一开始这个城市组件 是透明的 在顶部 的固定定位

当屏幕滑动的时候到一定的距离 将这个固定的盒子 背景颜色变成白色

2.Taro中的滚动

Taro中的滚动 有固定的api  像生命周期一样 这个生命周期是 usePageScroll

import Taro, { useDidShow, usePageScroll } from "@tarojs/taro";

 

usePageScroll((res) => {
  if (res.scrollTop >= 228) {
    isColorLight.value = true;
  } else {
    isColorLight.value = false;
  }
});

这个里面是scrollTop的值  根据项目里的 这个高度 计算出一个布尔值

这样就可以实现这个功能

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

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

相关文章

外包干了5天,技术退步明显.......

先说一下自己的情况,大专生,18年通过校招进入杭州某软件公司,干了接近4年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

Django源码之路由的本质(上)——逐步剖析底层执行流程

目录 1. 前言 2. 路由定义 3. 路由定义整体源码分析 3.1 partial实现path函数调用 3.2 图解_path函数 3.3 最终 4.URLPattern和Pattern的简单解析 5. 小结 1. 前言 在学习Django框架的时候,我们大多时候都只会使用如何去开发项目,对其实现流程并…

【C++】位图

> 作者:დ旧言~ > 座右铭:松树千年终是朽,槿花一日自为荣。 > 目标:手撕哈希表的闭散列和开散列 > 毒鸡汤: 坚持不懈,才能在困难面前看到光明的希望。 > 专栏选自:C嘎嘎进阶 >…

基于单片机病房温度监测与呼叫系统设计

**单片机设计介绍,基于单片机病房温度监测与呼叫系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机病房温度监测与呼叫系统设计概要主要涵盖了通过单片机技术实现病房温度的实时监测以及病人呼叫功能…

java字符串(一)-- 字符串API,StringBuffer 和 StringBuilder,Object

String字符串相关的类 String的特性 String类:代表字符串。Java 程序中的所有字符串字面值(如"abc" )都作为此类的实例实现。String类是引用数据类型。 在 Java 8 中,String 内部使用 char 数组存储数据。 public fi…

C++入门知识点

目录 一、命名空间 1.命名空间的定义 2.命名空间的使用 二、输入和输出 三、缺省参数 1.缺省参数的概念 2.缺省参数的分类 1)全缺省参数 2)半缺省参数 四、函数重载 五、引用 1.引用的概念 2.引用的特性 3.引用和指针的区别 六、内联函…

gan zoo: 最新GAN 相关paper/code收集

相关推荐: 简单实现 GAN 简单实现 DCGAN 简单实现 InfoGAN 简单实现 Pix2Pix 一文带你读懂概率生成模型 GPT-1/GPT-2/GPT-3简介 GPT从0到1构建(附视频代码链接) 一文带你读懂变分自编码器(VAEs) 文本引导图像生成模型的演变(DALLE/CLIP/GLIDE) 作者对迄今为止所有的…

YOLOv7--复现并训练自己的数据集(简单)

目录 1、官网下载代码 2、上传代码至服务器 3、配置环境 4、上传数据集 5、新建yaml文件 6、修改Yolov7.yaml文件 7、修改train.py文件 8、开始训练 9、复现Yolov7遇到的错误: 1、官网下载代码 Yolov7代码下载网址: https://github.com/WongKi…

【vue2+antvx6】报错Cannot read properties of undefined (reading ‘toUpperCase‘)

我的代码是这样的 <el-collapseref"collapse"v-model"active"accordionclass"collapseStart"change"collapsechange"><el-collapse-item:name"String(index 1)"v-for"(i, index) in List":key"in…

Linux重点思考(下)--shell脚本使用以及内核开发

Linux重点思考(下&#xff09;--shell脚本使用和组合拳 shell脚本的基础算法shell脚本写123...n的值&#xff0c;说思路Shell 脚本用于执行服务器性能测试的死循环Shell 脚本备份和定时清理垃圾文件 shell脚本的内核开发正向映射反向映射 shell脚本的基础算法 shell脚本写123……

SpringBoot常见注解有哪些

Spring Boot的核心注解是SpringBootApplication , 他由几个注解组成 : ● SpringBootConfiguration&#xff1a; 组合了- Configuration注解&#xff0c;实现配置文件的功能&#xff1b; ● EnableAutoConfiguration&#xff1a;打开自动配置的功能&#xff0c;也可以关闭某个自…

答辩PPT最后一页除了写谢谢观看,谢谢聆听,感谢老师,还可以写什么呢?

以我的答辩PPT为例吧 我当时写的这两句话得到了导师的肯定&#xff0c;大家可以参考 感谢导师悉心指导&#xff0c;敬请老师批评指正

linux之忘记root密码

一&#xff0c;开机到如下地方按下e进入紧急模式 然后再如下位置输入init/bin/bash 然后Ctrlx 二&#xff0c; 修改密码 以上操作分别为 1&#xff09;&#xff0c;重新挂载根目录 mount -o remount,rw / 2&#xff09;&#xff0c;修改密码 passwd root 3&#xff09;&a…

redis-shake可视化监控

目录 一.redis-shake v4 1.镜像 2.shake.toml 3.启动redis-shake后 二.json-exporter配置 1.Dockerfile 2.config.yml 三.prometheus配置 1.prometheus.yml 2.redis-shake.json 四.grafana 一.redis-shake v4 1.镜像 ######################### Dockerfile #########…

平衡二叉树(AVL树)

文章目录 平衡二叉树&#xff08;AVL树&#xff09;1、平衡二叉树概念2、平衡二叉树的的实现2.1、平衡二叉树的结点定义2.2、平衡二叉树的插入2.3、平衡二叉树的旋转2.3.1、右单旋&#xff08;R旋转&#xff09;2.3.2、左单旋&#xff08;L旋转&#xff09;2.3.3、先右单旋再左…

详解JAVA程序调优

目录 1.概述 2.命令 2.1.查看JAVA进程 2.2.查看虚拟机状态 2.3.查看线程的情况 3.工具 3.1.jconsole 3.2.jvisualVM 4.实战场景 1.概述 在实际工作中我们难免会遇见程序执行慢、线程死锁等一系列的问题&#xff0c;这时候就需要我们定位具体问题然后来解决问题了。所…

正弦实时数据库(SinRTDB)的使用(7)-历史统计查询

前文已经将正弦实时数据库的使用进行了介绍&#xff0c;需要了解的可以先看下面的博客&#xff1a; 正弦实时数据库(SinRTDB)的安装 正弦实时数据库(SinRTDB)的使用(1)-使用数据发生器写入数据 正弦实时数据库(SinRTDB)的使用(2)-接入OPC DA的数据 正弦实时数据库(SinRTDB)…

【Frida】【Android】02_JAVA层HOOK

&#x1f6eb; 系列文章导航 【Frida】【Android】01_手把手教你环境搭建 https://blog.csdn.net/kinghzking/article/details/136986950【Frida】【Android】02_JAVA层HOOK https://blog.csdn.net/kinghzking/article/details/137008446【Frida】【Android】03_RPC https://bl…

从输入url到页面展示的过程

唠唠叨&#xff1a;我不想误人子弟&#xff0c;我这篇算是搬运工&#xff0c;加上自己的理解做点总结&#xff0c;所以还请大家科学上网去看这篇&#xff1a;https://aws.amazon.com/cn/blogs/mobile/what-happens-when-you-type-a-url-into-your-browser/ 是这六个步骤&#…

前端学习<二>CSS基础——13-CSS3属性:Flex布局图文详解

前言 CSS3中的 flex 属性&#xff0c;在布局方面做了非常大的改进&#xff0c;使得我们对多个元素之间的布局排列变得十分灵活&#xff0c;适应性非常强。其强大的伸缩性和自适应性&#xff0c;在网页开中可以发挥极大的作用。 flex 初体验 我们先来看看下面这个最简单的布局…