当前位置:网站首页>监听页面滚动位置定位底部按钮(包含页面初始化定位不对鼠标滑动生效的解决方案)
监听页面滚动位置定位底部按钮(包含页面初始化定位不对鼠标滑动生效的解决方案)
2022-07-29 07:27:00 【单身girl】
// 核心关键 获取到数据以后调用监听的方法以免页面高度没撑起来
//导致刚进入页面计算不准确带来的定位问题
<template>
<div >
<div :class="isFixed? 's-bottom':'s-bottom s-bottmo-fixed'"> 需要定位的元素<div >
</div>
</template>
<script>
export default {
layout: 'timeline',
name: 'shopping',
data() {
return {
isFixed:false,
}
},
mounted () {
//给window添加一个滚动滚动监听事件
window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
//离开该页面需要移除这个监听的事件
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight;
let scrollHeight = document.documentElement.scrollHeight;
if (scrollTop + clientHeight >= (scrollHeight-50)) {
this.isFixed = true
} else {
this.isFixed = false
}
},
// 获取购物车列表
async getCartGoods() {
const params = {
...this.params,
...this.goodsForm
}
let data = await this.$api('mallWeb.cartGoods')(params)
this.goodList = data.dataList;
this.total = data.total
// 核心关键 获取到数据以后调用监听的方法以免页面高度没撑起来
//导致刚进入页面计算不准确带来的定位问题
this.$nextTick(()=>{
this.handleScroll()
})
}
```}
边栏推荐
- Pat class a 1146 topology sequence
- 一篇长文---深入理解synchronized
- Section 7 - compilation of programs (preprocessing operations) + links
- [daily question in summer] Luogu p6408 [coci2008-2009 3] pet
- 女研究生做“思维导图”与男友吵架!网友:吵架届的“内卷之王”....
- 【FPGA教程案例42】图像案例2——通过verilog实现图像二值化处理,通过MATLAB进行辅助验证
- log4j Layout简介说明
- Can the subset of the array accumulate K
- Using C language to skillfully realize the chess game -- Sanzi chess
- Vue router route cache
猜你喜欢

Leetcode buckle classic problem -- 4. Find the median of two positively ordered arrays

Practice of online problem feedback module (XVII): realize the online download function of excel template
Scala higher order (10): exception handling in Scala

QT专题:基础部件(按钮类,布局类,输出类,输入类,容器类)
Scala 高阶(九):Scala中的模式匹配

多线程购物

Docker最新超详细教程——Docker创建运行MySQL并挂载

Latest 10 billion quantitative private placement list
![【暑期每日一题】洛谷 P6461 [COCI2006-2007#5] TRIK](/img/bf/c0e03f1bf477730f0b3661b3256d1d.png)
【暑期每日一题】洛谷 P6461 [COCI2006-2007#5] TRIK

log4qt内存泄露问题,heob内存检测工具的使用
随机推荐
基于高阶无六环的LDPC最小和译码matlab仿真
logback中RollingFileAppender属性简介说明
2-统一返回类DTO对象
What are the answers about older bloggers?
程序的静态库与动态库的区别
PAT甲级 1150 旅行商问题
信用卡购物积分
ef core 读取text类型慢_ef core读取大字符串字段慢
写点dp
Prometheus与Grafana
小D的刺绣
多线程购物
7-2 计算正五边形的面积和周长 (25分)
How does MySQL convert rows to columns?
stm32 操作W25Q256 W25Q16 spi flash
Life cycle hooks in routing - activated and deactivated
[daily question in summer] Luogu p6408 [coci2008-2009 3] pet
Introduction to log4j layout
Android面试题 | 怎么写一个又好又快的日志库?
Does Flink support sqlserver databases? Get the changes of SQLSERVER database