当前位置:网站首页>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>
边栏推荐
- 0 basic learning C language - digital tube
- Notes de développement du matériel (10): flux de base du développement du matériel, fabrication d'un module USB à RS232 (9): création de la Bibliothèque d'emballage ch340g / max232 SOP - 16 et Associa
- i.mx6ull搭建boa服务器详解及其中遇到的一些问题
- Chapter 3: detailed explanation of class loading process (class life cycle)
- NetXpert XG2帮您解决“布线安装与维护”难题
- CCNA Cisco network EIGRP protocol
- Management background --2 Classification list
- [sdx62] wcn685x will bdwlan Bin and bdwlan Txt mutual conversion operation method
- 【踩坑合辑】Attempting to deserialize object on CUDA device+buff/cache占用过高+pad_sequence
- Inno setup packaging and signing Guide
猜你喜欢
软考高级(信息系统项目管理师)高频考点:项目质量管理
新手程序员该不该背代码?
硬件开发笔记(十): 硬件开发基本流程,制作一个USB转RS232的模块(九):创建CH340G/MAX232封装库sop-16并关联原理图元器件
Classic sql50 questions
2022-07-04 mysql的高性能数据库引擎stonedb在centos7.9编译及运行
ResNet-RS:谷歌领衔调优ResNet,性能全面超越EfficientNet系列 | 2021 arxiv
图像的spatial domain 和 frequency domain 图像压缩
Clip +json parsing converts the sound in the video into text
pytorch_ Yolox pruning [with code]
labelimg的安装与使用
随机推荐
Dealing with the crash of QT quick project in offscreen mode
柔性数组到底如何使用呢?
case 关键字后面的值有什么要求吗?
volatile关键字
【编译原理】做了一半的LR(0)分析器
2500 common Chinese characters + 130 common Chinese and English characters
[linear algebra] determinant of order 1.3 n
AdaViT——自适应选择计算结构的动态网络
雅思口语的具体步骤和时间安排是什么样的?
硬件開發筆記(十): 硬件開發基本流程,制作一個USB轉RS232的模塊(九):創建CH340G/MAX232封裝庫sop-16並關聯原理圖元器件
Memorabilia of domestic database in June 2022 - ink Sky Wheel
[leetcode] 19. Delete the penultimate node of the linked list
Lora sync word settings
重磅新闻 | Softing FG-200获得中国3C防爆认证 为客户现场测试提供安全保障
SQL Server生成自增序号
Gd32f4xx serial port receive interrupt and idle interrupt configuration
Leetcode exercise - Sword finger offer 26 Substructure of tree
MySQL约束的分类、作用及用法
That's why you can't understand recursion
【踩坑合辑】Attempting to deserialize object on CUDA device+buff/cache占用过高+pad_sequence