【uniapp】滚动相关

1、滚动到一定区域,顶部内容置换并置顶

     

 功能:

     当我向下滚动时,当关注那一行快到顶部的时候,把左侧区域的内容切换成右侧区域的内容,并置顶

 原先我使用v-if来显示隐藏,发现会出现闪屏的现象,后来我把他改成visibility就可以了

<template><view class="home_container"><view :style="{visibility: !ScrollTop?'none':'hidden'}">左侧内容</view><view class="ScrollTop" :style="{'top':statusBarHeight,visibility: !ScrollTop?'none':'hidden'}">右侧内容</view></view>
</template><script>export default {data() {return {listTop: 0, //底部关注推荐部分,距离顶部的距离statusBarHeight: 0,ScrollTop: false, //滚动页面显示对应区域}},onReady() {this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 40 + 'px'// console.log(this.statusBarHeight) //这个就是距离顶部的高度let query = uni.createSelectorQuery().in(this);query.select('#bottom_word').boundingClientRect(data => {this.listTop = data.top - 87 - 100 //减去导航栏}).exec();},onPageScroll(e) { //监听页面滚动距离this.ScrollTop = e.scrollTop >= this.listTop},}
</script>

 

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

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

相关文章

选读SQL经典实例笔记23_读后总结与感想兼导读

1. 基本信息 SQL经典实例 SQL Cookbook [美]安东尼莫利纳罗&#xff08;Anthony Molinaro&#xff09; / 人民邮电出版社 / 2018-07 / 其他 人民邮电出版社,2018年7月出版第1版&#xff0c;2021年12月出版第2版 1.1. 读薄率 1版书籍总字数827千字&#xff0c;笔记总字数30…

c++QT文件操作

1 介绍 QT的文件操作来源于其抽象基类QIODevice&#xff0c;中用于处理输入输出设备。提供了统一的接口来处理不同类型的数据源&#xff0c;如文件、套接字、缓冲区等。QIODevice 主要用于读取和写入数据&#xff0c;无论数据来自何种源头&#xff0c;都可以通过 QIODevice 统一…

【资料分享】全志科技T507-H开发板规格书

1 评估板简介 创龙科技TLT507-EVM是一款基于全志科技T507-H处理器设计的4核ARM Cortex-A53国产工业评估板,主频高达1.416GHz,由核心板和评估底板组成。核心板CPU、ROM、RAM、电源、晶振等所有器件均采用国产工业级方案,国产化率100%。同时,评估底板大部分元器件亦采用国产…

HarmonyOS SDK开放能力,服务鸿蒙生态建设,打造优质应用体验

华为开发者大会2023&#xff08;HDC.Together&#xff09;于8月4日至6日在东莞松山湖举行&#xff0c;在HarmonyOS端云开放能力技术分论坛上&#xff0c;华为为广大开发者们介绍了HarmonyOS SDK开放能力在基础开发架构、功能特性等方面的变化之处&#xff0c;通过将常见的通用能…

日常BUG——Java使用Bigdecimal类型报错

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一、问题描述 直接上代码&#xff1a; Test public void test22() throws ParseException {System.out.p…

【webpack】自定义loader

&#x1f4dd;个人主页&#xff1a;爱吃炫迈 &#x1f48c;系列专栏&#xff1a;前端工程化 &#x1f9d1;‍&#x1f4bb;座右铭&#xff1a;道阻且长&#xff0c;行则将至&#x1f497; 文章目录 loaderloader引入方式loader传入/接收参数传入参数接收参数 loader返回值retur…

竞赛项目 深度学习疲劳驾驶检测 opencv python

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 &#x1f525; 优…

SpringBoot在线失物招领系统

一个基于SpringBootSemanticUI的pc Web在线失物招领系统 http://localhost:8080/swzl/index 主页 http://localhost:8080/swzl/login 登录页 用户表user admin字段为true是管理员 false用户 springboot2.3 springmvc mybatis html ajax idea 或eclipse maven mys…

linux 下安装部署flask项目

FlaskDemo 命名为test.py # codingutf-8 from flask import Flaskapp Flask(__name__)app.route("/") def index():return "test"if __name__ __main__:app.debug True# 这里host一定要写0.0.0.0 写127.0.0.1的无法访问 ——_——app.run(host"0.…

C++11语法笔记

文章目录 一.类中新增的默认成员函数:移动赋值和移动构造二.lambda表达式三.包装器bind函数 一.类中新增的默认成员函数:移动赋值和移动构造 二.lambda表达式 三.包装器 bind函数

背上大大书包准备run之JS篇(含Es6)

word天&#xff0c;整理都半天&#xff0c;这么多&#xff0c;不得背死我。。。 js数据类型&#xff1f; 原始类型&#xff08;Primitive types&#xff09;: 数字 (Number)&#xff1a;例如&#xff1a;42, 3.14. 字符串 (String)&#xff1a;例如&#xff1a;"Hello…

使用 PyTorch 逐步检测单个对象

一、说明 在对象检测任务中&#xff0c;我们希望找到图像中对象的位置。我们可以搜索一种类型的对象&#xff08;单对象检测&#xff0c;如本教程所示&#xff09;或多个对象&#xff08;多对象检测&#xff09;。通常&#xff0c;我们使用边界框定义对象的位置。有几种方法可以…

【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端,你会使用原生态的Fegin吗?(上)

前提介绍 Feign是SpringCloud中服务消费端的调用框架&#xff0c;通常与ribbon&#xff0c;hystrix等组合使用。由于遗留原因&#xff0c;某些项目中&#xff0c;整个系统并不是SpringCloud项目&#xff0c;甚至不是Spring项目&#xff0c;而使用者关注的重点仅仅是简化http调…

《golang设计模式》第二部分·结构型模式-01-适配器模式(Adapter)

文章目录 1. 概念1.1 角色1.2 应用场景1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 示例类图 1. 概念 定义一个适配器&#xff0c;帮助原本不能实现接口的类“实现”该接口 1.1 角色 目标&#xff08;Target&#xff09;&#xff1a;客户端调用的目标接口 被适配者&#xff08…

Linux tar包安装 Prometheus 和 Grafana

0. 介绍 用tar包的方式安装 Prometheus 和 Grafana Prometheus:开源的监控方案Grafana:将Prometheus的数据可视化平台 1. Prometheus 1. 下载 与 解压 官网下载: https://prometheus.io/download/#prometheus上传至机器解压命令:tar -xzf prometheus-*.tar.gz 2. 启动与暂…

phpspreadsheet excel导入导出

单个sheet页Excel2003版最大行数是65536行。Excel2007开始的版本最大行数是1048576行。Excel2003的最大列数是256列&#xff0c;2007以上版本是16384列。 xlswriter xlswriter - PHP 高性能 Excel 扩展&#xff0c;功能类似phpspreadsheet。它能够处理非常大的文件&#xff0…

微信小程序隐私协议模板

在 设置 中找到 用户隐私保护 进行更新&#xff0c;如下图&#xff1a; 具体协议补充可参考如下&#xff1a; 为了分辨用户&#xff0c;开发者将在获取你的明示同意后&#xff0c;收集你的微信昵称、头像 为了显示距离&#xff0c;开发者将在获取你的明示同意后&#xff0c;收…

8. yaml文件管理

文章目录 yaml文件管理编写yaml配置文件获取配置模板方法一方法二方法三方法四 yaml文件管理 Kubernetes 支持 YAML 和 JSON 格式管理资源对象 JSON 格式&#xff1a;主要用于 api 接口之间消息的传递YAML 格式&#xff1a;用于配置和管理&#xff0c;YAML 是一种简洁的非标记性…

Hash 缓存

Hash 缓存 输出文件名&#xff08;Hash&#xff09; 静态资源缓存是前端性能优化的一个点&#xff0c;所以在前端开发过程中&#xff0c;一般会最大限度的利用缓存&#xff08;这里主要是强缓存&#xff09;。如果设置了强缓存后&#xff0c;每次当我们部署了新的项目文件到线…

“深入探究JVM:揭秘Java虚拟机的工作原理“

标题&#xff1a;深入探究JVM&#xff1a;揭秘Java虚拟机的工作原理 摘要&#xff1a;本文将深入探究Java虚拟机&#xff08;JVM&#xff09;的工作原理&#xff0c;包括JVM的架构、内存管理、垃圾回收机制以及即时编译等关键概念。通过详细解释这些概念&#xff0c;读者将能够…