当前位置:网站首页>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>
边栏推荐
- 硬件开发笔记(十): 硬件开发基本流程,制作一个USB转RS232的模块(九):创建CH340G/MAX232封装库sop-16并关联原理图元器件
- 2022-07-05 使用tpcc对stonedb进行子查询测试
- SQL Server生成自增序号
- Management background --5, sub classification
- C# 三种方式实现Socket数据接收
- 2022-07-05 use TPCC to conduct sub query test on stonedb
- 中国VOCs催化剂行业研究与投资战略报告(2022版)
- Attack and defense world miscall
- 空结构体多大?
- sizeof关键字
猜你喜欢
Management background --5, sub classification
config:invalid signature 解决办法和问题排查详解
2022-07-04 mysql的高性能数据库引擎stonedb在centos7.9编译及运行
Daily question 1: force deduction: 225: realize stack with queue
Data processing skills (7): MATLAB reads the data in the text file TXT with mixed digital strings
Web APIs DOM time object
MySQL----初识MySQL
Management background --1 Create classification
MySQL数据库基本操作-DML
网络基础入门理解
随机推荐
return 关键字
3DMax指定面贴图
Management background --3, modify classification
MySQL教程的天花板,收藏好,慢慢看
MySQL约束的分类、作用及用法
anaconda安装第三方包
[leetcode daily clock in] 1020 Number of enclaves
手写ABA遇到的坑
Senior soft test (Information System Project Manager) high frequency test site: project quality management
Data processing skills (7): MATLAB reads the data in the text file TXT with mixed digital strings
Insert sort and Hill sort
extern关键字
2022-07-04 the high-performance database engine stonedb of MySQL is compiled and run in centos7.9
The nearest common ancestor of binary (search) tree ●●
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
MySQL----初识MySQL
中国VOCs催化剂行业研究与投资战略报告(2022版)
LeetCode 练习——剑指 Offer 26. 树的子结构
Dealing with the crash of QT quick project in offscreen mode
General implementation and encapsulation of go diversified timing tasks