当前位置:网站首页>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>
边栏推荐
- Chapter 4: talk about class loader again
- Heavyweight news | softing fg-200 has obtained China 3C explosion-proof certification to provide safety assurance for customers' on-site testing
- Inno setup packaging and signing Guide
- labelimg的安装与使用
- C # realizes crystal report binding data and printing 4-bar code
- 十二、启动流程
- [leetcode] 19. Delete the penultimate node of the linked list
- Lora sync word settings
- 小程序系统更新提示,并强制小程序重启并使用新版本
- Pit encountered by handwritten ABA
猜你喜欢
0 basic learning C language - digital tube
C # réalise la liaison des données du rapport Crystal et l'impression du Code à barres 4
自制J-Flash烧录工具——Qt调用jlinkARM.dll方式
Management background --2 Classification list
(十八)LCD1602实验
硬件開發筆記(十): 硬件開發基本流程,制作一個USB轉RS232的模塊(九):創建CH340G/MAX232封裝庫sop-16並關聯原理圖元器件
剑指offer刷题记录1
Mysql database basic operations DML
CCNA Cisco network EIGRP protocol
0 basic learning C language - interrupt
随机推荐
自制J-Flash烧录工具——Qt调用jlinkARM.dll方式
[leetcode daily clock in] 1020 Number of enclaves
Anaconda installs third-party packages
A Mexican airliner bound for the United States was struck by lightning after taking off and then returned safely
Classification, function and usage of MySQL constraints
That's why you can't understand recursion
Leetcode question brushing (XI) -- sequential questions brushing 51 to 55
OpenCV VideoCapture. Get() parameter details
Advantages of link local address in IPv6
How do I write Flask's excellent debug log message to a file in production?
空结构体多大?
2022-07-04 mysql的高性能数据库引擎stonedb在centos7.9编译及运行
Inno setup packaging and signing Guide
SQL Server生成自增序号
Spatial domain and frequency domain image compression of images
Netxpert xg2 helps you solve the problem of "Cabling installation and maintenance"
Attack and defense world ditf Misc
pytorch_ Yolox pruning [with code]
Assembly and interface technology experiment 5-8259 interrupt experiment
二叉(搜索)树的最近公共祖先 ●●