当前位置:网站首页>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 3: detailed explanation of class loading process (class life cycle)
- const关键字
- 每日一题:力扣:225:用队列实现栈
- Mysql database basic operations DML
- AI enterprise multi cloud storage architecture practice | Shenzhen potential technology sharing
- 做国外LEAD2022年下半年几点建议
- Management background --2 Classification list
- lora同步字设置
- Management background --3, modify classification
- SQL Server生成自增序号
猜你喜欢
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
CCNA Cisco network EIGRP protocol
手写ABA遇到的坑
2500 common Chinese characters + 130 common Chinese and English characters
二分图判定
[leetcode daily clock in] 1020 Number of enclaves
【编译原理】做了一半的LR(0)分析器
C#實現水晶報錶綁定數據並實現打印4-條形碼
Web APIs DOM time object
C# 三种方式实现Socket数据接收
随机推荐
Common sense: what is "preservation" in insurance?
【踩坑合辑】Attempting to deserialize object on CUDA device+buff/cache占用过高+pad_sequence
新手程序员该不该背代码?
CCNA Cisco network EIGRP protocol
Gd32f4xx serial port receive interrupt and idle interrupt configuration
Plafond du tutoriel MySQL, bien collecté, regardez lentement
anaconda安装第三方包
AdaViT——自适应选择计算结构的动态网络
每日一题:力扣:225:用队列实现栈
Assembly and interface technology experiment 5-8259 interrupt experiment
labelimg的安装与使用
GD32F4XX串口接收中断和闲时中断配置
Chapter 4: talk about class loader again
General implementation and encapsulation of go diversified timing tasks
NPDP certification | how do product managers communicate across functions / teams?
Data processing skills (7): MATLAB reads the data in the text file TXT with mixed digital strings
十二、启动流程
C # realizes crystal report binding data and printing 4-bar code
Research and investment strategy report of China's VOCs catalyst industry (2022 Edition)
The nearest common ancestor of binary (search) tree ●●