【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.rhkb.cn/news/86005.html

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

相关文章

nodejs+vue+elementui美食网站的设计与实现演示录像2023_0fh04

本次的毕业设计主要就是设计并开发一个美食网站软件。运用当前Google提供的nodejs 框架来实现对美食信息查询功能。当然使用的数据库是mysql。系统主要包括个人信息修改&#xff0c;对餐厅管理、用户管理、餐厅信息管理、菜系分类管理、美食信息管理、美食文化管理、系统管理、…

【Redis】Redis内存过期策略和内存淘汰策略

【Redis】Redis内存过期策略和内存淘汰策略 文章目录 【Redis】Redis内存过期策略和内存淘汰策略1. 过期策略1.1 惰性删除1.2 周期删除1.2.1 SLOW模式1.2.2 FAST模式 2. 淘汰策略 1. 过期策略 Redis本身是一个典型的key-value内存存储数据库&#xff0c;因此所有的key、value都…

负载均衡–HAProxy安装及搭建tidb数据库负载服务

作为一名开发人员&#xff0c;随着经验的增加和技术的沉淀&#xff0c;需要提高自己架构方面的知识&#xff0c;同时对于一个企业来说&#xff0c;搭建一套高可用、高性能的技术架构&#xff0c;对于公司的业务开展和提高服务的性能也是大有裨益的。本文重点从软件安装和搭建ti…

基于Dlib库+SVM+Tensorflow+PyQT5智能面相分析-机器学习算法应用(含全部工程源码)+训练及测试数据集

目录 前言总体设计系统整体结构图系统流程图模型流程 运行环境Python 环境TensorFlow环境界面编程环境 模块实现1. 数据预处理2. 模型构建1&#xff09;定义模型结构2&#xff09;交叉验证模型优化 3. 模型训练及保存4. 模型测试1&#xff09;摄像头调用2&#xff09;模型导入及…

RCNA——单臂路由

一&#xff0c;实验背景 之前的VLAN实现的很多都是相同部门互相访问&#xff0c;不同部门无法访问。不过这次整来了一个路由器&#xff0c;领导说大部分的部门虽说有保密信息需要互相隔离&#xff0c;但是这些部门和其它部门也应该互相连通以方便工作交流。因此要配置新的环境&…

无人机光伏巡检系统的全新作用解析,提升效率保障安全

随着光伏发电行业的快速发展&#xff0c;光伏电站的规模越来越大&#xff0c;光伏维护和巡检成为一个巨大的挑战。为解决传统巡检方法的低效率和安全风险问题&#xff0c;无人机光伏巡检系统应运而生&#xff0c;并成为提升光伏巡检效率和保障安全的利器。 首先&#xff0c;无人…

vue手写多对多关联图,连线用leader-line

效果如图 鼠标滑动效果 关联性效果 <template ><div class"main" ref"predecessor"><div class"search"><div class"search-item"><div class"search-item-label">部门</div><Trees…

C++——关于命名空间

写c项目时&#xff0c;大家常用到的一句话就是&#xff1a; using namespace std; 怎么具体解析这句话呢&#xff1f; 命名冲突&#xff1a; 在c语言中&#xff0c;我们有变量的命名规范&#xff0c;如果一个变量名或者函数名和某个库里面自带的库函数或者某个关键字重名&…

涛思数据联合长虹佳华、阿里云 Marketplace 正式发布 TDengine Cloud

近日&#xff0c;涛思数据联合长虹佳华&#xff0c;正式在阿里云 Marketplace 发布全托管的时序数据云平台 TDengine Cloud&#xff0c;为用户提供更加丰富的订购渠道。目前用户可通过阿里云 Marketplace 轻松实现 TDengine Cloud 的订阅与部署&#xff0c;以最低的成本搭建最高…

【数学建模】--灰色关联分析

系统分析: 一般的抽象系统&#xff0c;如社会系统&#xff0c;经济系统&#xff0c;农业系统&#xff0c;生态系统&#xff0c;教育系统等都包含有许多种因素&#xff0c;多种因素共同作用的结果决定了该系统的发展态势。人们常常希望知道在众多的因素中&#xff0c;哪些是主要…

3.6 Spring MVC文件上传

1. 文件上传到本地 实现方式 Spring MVC使用commons-fileupload实现文件上传&#xff0c;注意事项如下&#xff1a; l HTTP请求方法是POST。 l HTTP请求头的Content-Type是multipart/form-data。 SpringMVC配置 配置commons-fileupload插件的文件上传解析器CommonsMultip…

vue二进制下载

封装axios&#xff0c;/api/request import axios from axios import store from /store import Vue from vue import { Message, MessageBox } from element-uiimport { getToken } from /utils/authaxios.defaults.headers[Content-Type] application/json;charsetutf-8 co…

如何选择适合自己的文件传输工具

随着互联网的发展&#xff0c;人们处理文件的需求也随之增加。不管是工作还是生活中&#xff0c;文件传输都是一个非常常见的问题。因此&#xff0c;如何选择适合自己的文件传输工具也越来越重要。在本文中&#xff0c;我将从以下几个方面进行分析和总结&#xff0c;希望能为大…

面试攻略,Java 基础面试 100 问(七)

String 是最基本的数据类型吗? 不是。Java 中的基本数据类型只有 8 个&#xff1a;byte、short、int、long、float、 double、char、boolean&#xff1b;除了基本类型&#xff08;primitive type&#xff09;和枚举类型&#xff08;enumeration type&#xff09;&#xff0c…

Android图形-合成与显示-SurfaceTestDemo

目录 引言&#xff1a; 主程序代码&#xff1a; 结果呈现&#xff1a; 小结&#xff1a; 引言&#xff1a; 通过一个最简单的测试程序直观Android系统的native层Surface的渲染显示过程。 主程序代码&#xff1a; #include <cutils/memory.h> #include <utils/L…

干货 | 详述 Elasticsearch 向量检索发展史

1. 引言 向量检索已经成为现代搜索和推荐系统的核心组件。 通过将复杂的对象&#xff08;例如文本、图像或声音&#xff09;转换为数值向量&#xff0c;并在多维空间中进行相似性搜索&#xff0c;它能够实现高效的查询匹配和推荐。 图片来自&#xff1a;向量数据库技术鉴赏【上…

AI绘画网站都有哪些比较好用?

人工智能绘画网站是一种利用人工智能技术进行图像处理和创作的网站。这些绘画网站通常可以帮助艺术家以人工智能绘画的形式快速生成有趣、美丽和独特的绘画作品。无论你是专业的艺术家还是对人工智能绘画感兴趣的普通人&#xff0c;人工智能绘画网站都可以为你提供新的创作灵感…

优思学院|6西格玛标准值水平是多少?

在质量管理和统计学领域&#xff0c;"6西格玛" 是一个重要的概念&#xff0c;它与产品和流程的质量有着密切的关系。本文将解释"6西格玛"标准值水平是什么&#xff0c;以及它在各个行业中的应用。 什么是6西格玛标准值水平&#xff1f; 理解西格玛 西格…

9.2.1Socket(UDP)

一.传输层: 1.UDP:无连接,不可靠,面向数据报,全双工. 2.TCP:有连接,可靠,面向字节流,全双工. 注意:这里的可不可靠是相对的,并且和安不安全无关. 二.UDP数据报套接字编程: 1.socket文件:表示网卡的这类文件. 2.DatagramPacket:表示一个UDP数据报. 三.代码实现: 1.回显服务…

webstorm debug调试vue项目

1.运行npm&#xff0c;然后控制台会打印下图中的地址&#xff0c;复制local的地址 2.run–>Edit Configuration&#xff0c;如下图 3.设置测试项 4.在你需要的js段打好断点 5.在上边框的工具栏里面有debug运行&#xff0c;点击debug运行的图标运行即可