当前位置:网站首页>Monitor the bottom button of page scrolling position positioning (including the solution that page initialization positioning does not take effect on mouse sliding)
Monitor the bottom button of page scrolling position positioning (including the solution that page initialization positioning does not take effect on mouse sliding)
2022-07-29 07:38:00 【Single girl】
// The key is After getting the data, call the listening method to prevent the page height from not holding up
// It leads to positioning problems caused by inaccurate calculation of the newly entered page 
<template>
<div >
<div :class="isFixed? 's-bottom':'s-bottom s-bottmo-fixed'"> Elements that need to be located <div >
</div>
</template>
<script>
export default {
layout: 'timeline',
name: 'shopping',
data() {
return {
isFixed:false,
}
},
mounted () {
// to window Add a scrolling event
window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
// To leave the page, you need to remove the monitored event
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
}
},
// Get a list of shopping carts
async getCartGoods() {
const params = {
...this.params,
...this.goodsForm
}
let data = await this.$api('mallWeb.cartGoods')(params)
this.goodList = data.dataList;
this.total = data.total
// The key is After getting the data, call the listening method to prevent the page height from not holding up
// It leads to positioning problems caused by inaccurate calculation of the newly entered page
this.$nextTick(()=>{
this.handleScroll()
})
}
```}
边栏推荐
- 基于高阶无六环的LDPC最小和译码matlab仿真
- 【MYSQL】-【子查询】
- stm32 操作W25Q256 W25Q16 spi flash
- Popular cow G
- Leetcode buckle classic problem -- 4. Find the median of two positively ordered arrays
- How does MySQL convert rows to columns?
- 蓝桥杯A组选数异或
- The difference between static library and dynamic library of program
- Credit card shopping points
- [100 cases of unity practice] the single choice multiple choice judgment questions of unity universal question answering system are all common
猜你喜欢

国内数字藏品的乱象与未来

Docker's latest super detailed tutorial - docker creates, runs, and mounts MySQL

【无标题】格式保存

How to establish EDI connection with Scania in Scania?

Prometheus与Grafana

RoBERTa:A Robustly Optimized BERT Pretraining Approach

Thinkphp6 realizes database backup
黑盒测试常见错误类型说明及解决方法有哪些?

Amazon cloud assistant applet is coming!

【MYSQL】-【子查询】
随机推荐
写点dp
How much data can a single MySQL table store at most?
Prometheus and grafana
Calculate program run time demo
log4qt内存泄露问题,heob内存检测工具的使用
【暑期每日一题】洛谷 P4414 [COCI2006-2007#2] ABC
do end用法的妙处
QT topic: basic components (button class, layout class, output class, input class, container class)
How to establish EDI connection with Scania in Scania?
Pat class a 1154 vertex shading
How does MySQL convert rows to columns?
@Detailed explanation of requestmapping usage
Zip gzip tar compression Advanced Edition
NLP introduction + practice: Chapter 5: using the API in pytorch to realize linear regression
MySQL 45讲 | 08 事务到底是隔离的还是不隔离的?
log4j Layout简介说明
The difference between static library and dynamic library of program
电子元器件贸易企业如何借助ERP系统,解决仓库管理难题?
程序的静态库与动态库的区别
SEGGER 的硬件异常 分析