h5+vue页面下滑查看更多 页面触底+页面滑动
h5页面触底，不足一屏触发滑动 超过一屏触发触底效果
解决 页面大屏正好一屏，小屏超过一屏 页面下滑查看更多 的问题
解决方法1 超过一屏监听滚动 触底触发 小于或等于一屏监听触摸 上滑触发
data() {return {startY: 0,endY: 0,Fullscreen: true};},
添加触摸事件
//给触摸区域添加触摸事件<div @touchstart="touchstart()" @touchend="touchend()"></div>//事件touchstart() {if (!this.Fullscreen) {return; //判断 可视化的高度与溢出的距离 是否大于一屏 Fullscreen满屏}event.preventDefault(); //阻止默认事件（长按的时候出现复制）this.startY = event.changedTouches[0].pageY;console.log(this.startY);},touchend() {if (!this.Fullscreen) {return;}event.preventDefault();this.endY = event.changedTouches[0].pageY;if (this.startY - this.endY > 200) {console.log(this.endY);console.log(this.startY);//达到条件触发事件this.onscroll();}},
监听页面滚动
mounted() {window.addEventListener("scroll", this.getScroll);let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量windowHeight是 可视区的高度let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //变量scrollHeight是 滚动条的总高度 /可视化的高度与溢出的距离（总高度）if (windowHeight < scrollHeight) {this.Fullscreen = false;//是否满屏}},destroyed() {window.removeEventListener("scroll", this.getScroll);},
//监听滚动getScroll() {var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量scrollTop是滚动条滚动时，距离顶部的距离let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量windowHeight是 可视区的高度let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //变量scrollHeight是 滚动条的总高度 /可视化的高度与溢出的距离（总高度）console.log(scrollTop, windowHeight, scrollHeight);//滚动条到底部的条件if (scrollTop + windowHeight >= scrollHeight) {//触发事件}}
h5+vue页面下滑查看更多 页面触底+页面滑动相关推荐
- Vue简单的查看更多功能
Vue简单的查看更多功能 循环的数据 查看更多按钮
- vue中点击查看更多实现
场景: vue2.6.11 中,通过v-for循环list,只想显示前五条,后面的几条要通过查看更多按钮来展示. 如图 解决方案: 列如:list 长度为10,你只想显示前3条,后面几条要通过点击按钮 ...
- 微信小程序上拉加载 加载更多数据 触底加载 点击加载更多数据
开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for=&q ...
- “下滑、下滑、下滑”，格力真的触底了？
文 | 黄安 来源 | 螳螂财经(ID:TanglangFin) 同比下滑70%-77%,这对一个行业巨头来说,是不是意味着玩完了? 格力就正在经历这样的"事故". 近日,格力电器 ...
- 一个简单的适用于Vue的下拉刷新，触底加载组件
话不多说,直接上代码,原文地址 博客地址 <template><div class="list-warp-template"@touchstart="h ...
- 【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
1.下拉刷新事件 1. 什么是下拉刷新 下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为 2. 启用下拉刷新 启用下拉刷新有两种方式: ① 全局开启下拉刷新 ...
- Vue 列表 懒加载 触底加载
一.方法一 描述:列表懒加载+节流 效果图: 实现: 组件:LazyLoading <template><div class="lazy-list">< ...
- 【微信小程序】-—下拉刷新、上拉触底事件详细讲解
1.页面事件–下拉刷新事件 1.1什么是下拉刷新 下拉式移动端的专有名词,指的是通过手指子在屏幕上的下拉滑动操作,从而重新加载页面数据 2.启动下拉刷新 (1)方法一:全局开启下拉刷新 在app.js ...
- 卧槽，这个Vue调试神器牛逼！点击页面元素居然能直接打开对应组件文件…
点击上方"蓝色字体",选择"设为星标" 做积极向上的前端人! 1. 前言 我的文章尽量写得让想看源码又不知道怎么看的读者能看懂.我都是推荐使用搭建环境断点调试源 ...
最新文章
- 机器学习之优雅落地线性回归法
- php 重定向 cookie,php – 如何在CURL重定向上传递Cookie？
- 画图设置刻度_总结了16个常用的matlibplot画图技巧（附源码）
- 解析IOS控制台利用GDB命令查看报错堆栈
- glibc版本查看_Linux开发必知内容整理 | libc、glibc和glib的关系
- Spring: @Import @ImportResource引入资源
- linux pgpgin pgpgout pswpin pswpout 说明
- Jenkins:项目配置
- poj 2516(最小费用最大流)
- Julia-整数和浮点数
- Axure8.0 装汉化包
- LM117，LM217，LM317;LM137，LM237，LM337
- 2.1 matlab特殊矩阵（零矩阵、幺矩阵、单位矩阵、魔方矩阵、范德蒙德矩阵和希尔伯特矩阵）
- 手机html5跑分,吊炸天的Chrome55内核来袭 360手机浏览器成“跑分王”
- 通过蓝牙连接进行ActiveSync同步
- 计算机培训excel的制作,绵阳电脑excel表格制作教程
- NGUI-动画Tween
- (˙﹏˙) 开工~~~~~~
- python和前端哪个好_python和java哪个好用
- mysql外键(FK)及其外键关联操作reference