当前位置:网站首页>uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
2022-07-06 14:55:00 【我是开心呀】
滑动后tab固定到顶部
<template>
<view class="topBox" :class="head==1?'topBoxStyle':''">测试固定顶部测试固定顶部</view>
</template>
<script>
export default {
data(){
return{
head: 0,
myScroll:0,
}
},
onLoad(e) {
//获取目标板块到顶部的距离
uni.createSelectorQuery().select('.topBox').boundingClientRect(res=>{
this.myScroll =res.top;
console.log(this.myScroll,'this.myScroll-------')
}).exec();
},
methods: {
onPageScroll(e){
// console.log(e,'eeeee')
if(e.scrollTop > this.myScroll){
this.temp= 1
}else{
this.temp= 0
}
},
}
}
</script>
<style>
.boxStyle{
width: 100%;
height: 80rpx;
position: fixed;
top: 0;
left: 0;
background: #fff;
}
</style>
边栏推荐
- signed、unsigned关键字
- 2022-07-05 使用tpcc对stonedb进行子查询测试
- [leetcode daily clock in] 1020 Number of enclaves
- C#實現水晶報錶綁定數據並實現打印4-條形碼
- PVL EDI project case
- Installation and use of labelimg
- Hardware development notes (10): basic process of hardware development, making a USB to RS232 module (9): create ch340g/max232 package library sop-16 and associate principle primitive devices
- 剑指offer刷题记录1
- qt quick项目offscreen模式下崩溃的问题处理
- 做接口测试都测什么?有哪些通用测试点?
猜你喜欢

Should novice programmers memorize code?

Assembly and interface technology experiment 5-8259 interrupt experiment

Netxpert xg2 helps you solve the problem of "Cabling installation and maintenance"

UE4蓝图学习篇(四)--流程控制ForLoop和WhileLoop

Common sense: what is "preservation" in insurance?

2022年6月国产数据库大事记-墨天轮

PVL EDI 项目案例

That's why you can't understand recursion

剪映+json解析将视频中的声音转换成文本

Aardio - 通过变量名将变量值整合到一串文本中
随机推荐
自定义 swap 函数
NPDP certification | how do product managers communicate across functions / teams?
go多样化定时任务通用实现与封装
Seata聚合 AT、TCC、SAGA 、 XA事务模式打造一站式的分布式事务解决方案
空结构体多大?
Leetcode exercise - Sword finger offer 26 Substructure of tree
Installation and use of labelimg
【编译原理】做了一半的LR(0)分析器
数据处理技巧(7):MATLAB 读取数字字符串混杂的文本文件txt中的数据
硬件開發筆記(十): 硬件開發基本流程,制作一個USB轉RS232的模塊(九):創建CH340G/MAX232封裝庫sop-16並關聯原理圖元器件
2021 geometry deep learning master Michael Bronstein long article analysis
Insert sort and Hill sort
Management background --5, sub classification
HDR image reconstruction from a single exposure using deep CNN reading notes
labelimg的安装与使用
十二、启动流程
如何用程序确认当前系统的存储模式?
Should novice programmers memorize code?
MySQL教程的天花板,收藏好,慢慢看
2022-07-04 mysql的高性能数据库引擎stonedb在centos7.9编译及运行