当前位置:网站首页>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 - interrupt
- 2022-07-04 the high-performance database engine stonedb of MySQL is compiled and run in centos7.9
- NPDP certification | how do product managers communicate across functions / teams?
- Unity3d minigame unity webgl transform plug-in converts wechat games to use dlopen, you need to use embedded 's problem
- Research and investment strategy report of China's VOCs catalyst industry (2022 Edition)
- Classic sql50 questions
- volatile关键字
- Unity3d Learning Notes 6 - GPU instantiation (1)
- LeetCode 练习——剑指 Offer 26. 树的子结构
- Memorabilia of domestic database in June 2022 - ink Sky Wheel
猜你喜欢

图像的spatial domain 和 frequency domain 图像压缩

labelimg的安装与使用

Management background --1 Create classification

CCNA Cisco network EIGRP protocol
![[linear algebra] determinant of order 1.3 n](/img/6e/54f3a994fc4c2c10c1036bee6715e8.gif)
[linear algebra] determinant of order 1.3 n

基于 QEMUv8 搭建 OP-TEE 开发环境

Aardio - 封装库时批量处理属性与回调函数的方法

硬件開發筆記(十): 硬件開發基本流程,制作一個USB轉RS232的模塊(九):創建CH340G/MAX232封裝庫sop-16並關聯原理圖元器件

Leetcode: interview question 17.24 Maximum cumulative sum of submatrix (to be studied)

Web APIs DOM time object
随机推荐
Netxpert xg2 helps you solve the problem of "Cabling installation and maintenance"
[leetcode] 19. Delete the penultimate node of the linked list
Data storage (1)
pytorch_ Yolox pruning [with code]
Seata aggregates at, TCC, Saga and XA transaction modes to create a one-stop distributed transaction solution
(十八)LCD1602实验
Leetcode exercise - Sword finger offer 26 Substructure of tree
Oracle control file and log file management
Attack and defense world miscall
变量与“零值”的比较
C # realizes crystal report binding data and printing 4-bar code
extern关键字
墨西哥一架飞往美国的客机起飞后遭雷击 随后安全返航
Leetcode question brushing (XI) -- sequential questions brushing 51 to 55
Attack and defense world ditf Misc
Memorabilia of domestic database in June 2022 - ink Sky Wheel
将MySQL的表数据纯净方式导出
[linear algebra] determinant of order 1.3 n
MySQL教程的天花板,收藏好,慢慢看
3DMax指定面贴图