Vue.js手机端scroll事件的坑

最新推荐文章于 2024-05-30 16:44:19 发布
最新推荐文章于 2024-05-30 16:44:19 发布
阅读量1.3w 收藏 10
点赞数
分类专栏： Vue.js 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Iohboel/article/details/78457585
版权

延续之前的Vue.js的手机端开发，在滚动事件的时候遇到了很多问题，纪录下来，有的问题已经解决，有的留个坑，以后慢慢填～

主要包括

iOS滚动混用

  几个都有滚动的页面，在一个页面的滚动位置在链接到下一个页面的时候，新页面的滚动位置会被置为上一个页面的滚动位置。

iOS滚动页下面出现大面积空白

  当列表页进入到一个较长的详情页面时，详情页下拉到底部，看完之后返回时，列表页为空，内容移上去了，需要滑下来才能看到内容

iOS设置scrollTop无效

  希望通过设置scrollTop的方式，再次回到页面的时候还原之前滚动的位置，但是在iOS设备上，设置无效 

scrollT

最低0.47元/天 解锁文章
Iohboel
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vuescroll：基于vue.js的可自定义的滚动条插件，适用于PC，手机，触摸屏，笔记本电脑
02-06
Vuescroll介绍Vuescroll是基于Vue.js 2.X的滚动条插件，它非常易于使用，没有复杂的选项，每个选项都有其默认值（这意味着您甚至不必编写任何配置）。 只需用<vue>包装内容，就会显示一个自定义滚动条。 它支持： 可...
解决移动端scroll滑动很卡的问题
wenfu814的博客
09-15 3588
在手机端页面中，如果你对某个div或模块使用了overflow scroll 属性，那个在手机上滑动这个模块的时候会比较卡，很不流畅，用户体验很差，为了优化这样的问题，我们需要用到下面这段代码: webkit-overflow-scrolling: touch; 这段代码创建了带有硬件加速的系统级控件，效率很高;但是会消耗更多内存。 ...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1372
Document
每日一个小技巧：解决使用vue3在苹果系统上滑动卡顿和缓慢问题
最新发布
Cy01234的博客
05-30 542
聊一聊最近使用vue3开发的新系统吧，在安卓系统上测试一切正常，但是上线之后苹果系统的一系列问题就出来了，用户首先就是反馈苹果系统页面滑动卡顿。
实现手机端的触屏滑动效果
m0_63300737的博客
07-03 799
CSS 给父盒子(class=“x-roll”)设置 overflow: scroll 在父盒子外再设置一个大的父盒子,大的父盒子的高度恰好不能显示其子盒子(即class=“x-roll”)的滚动条,设置 overflow: hidden
vue项目中onscroll的坑
u010227042的博客
11-04 1838
vue项目中onscroll的坑 在项目中需要监听一个组件的scroll事件，以触发到底时加载更多。 但是实际操作下来发现scroll事件并没有被监听到。 通过查询资料得知，监听的目标元素element的scroll事件不冒泡。 解决scroll绑定失败的方法是：scroll直接绑定在window的捕获阶段； window.addEventListener(‘scroll’,methodName，true); 还有另外一个方式： 使用谷歌浏览器的开发者工具 performance 录制滚动动作，在event
iScroll版本
weixin_42235173的博客
06-05 273
版本 针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。 目前我们有以下版本： iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。 iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又...
Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
12-09
 我们都知道，对于移动端也就是手机上，我们页面的宽度并不像PC端那样大，可以显示很长的导航项，但对于我们移动端来说，由于功能的拓展，或者业务的细分，往往导航项也会随之增多，一旦超过移动端在一行的页面显示...
vue中实现移动端的scroll滚动方法
08-27
在Vue.js框架中，实现移动端的滚动效果通常可以借助第三方库，如`better-scroll`。`better-scroll`是一个强大的滚动插件，它提供了丰富的滚动功能，包括但不限于滚动、回弹、惯性滚动、滚动条等。以下是使用`better-...
VueScrollVideo:一个标准的移动端富文本页面，本项目基于vue.js 实现了流媒体视频的播放，并实现了视频组件滑出屏幕暂停，滑入屏幕重新播放的功能
05-09
基于vue-video-player 播放流媒体2.播放控制：滑出屏幕暂停，滑入屏幕重新播放3.基于vue-bus 进行组件间的通信4.一个标准的富文本排版使用步骤# install dependenciesnpm install# serve with hot reload at ...
vue移动端列表组件支持下拉刷新上拉加载更多
08-12
总结，Vue.js移动端列表组件支持下拉刷新和上拉加载更多功能，是通过事件监听、状态管理、组件通信等手段实现的。通过合理的数据处理和优化策略，可以提供流畅、高效且用户体验优秀的列表展示。在实际项目中，开发者...
Vue列表滚动底部加载更多及Scroll在IOS下兼容问题导致数据重复的解决
米拉
06-26 1067
列表滑动至底部加载更多，效果如下： Android下效果如期，在Ios下会出现在屏幕滑动时会多次触发scroll事件给后台发送请求，导致申请数据重复的问题， 解决方法是定义一个全局变量，每次申请数据时都去判断这个变量的值。 HTML： <ul class="List"> <li v-for="(list,id) in listData" :key="id" @click="ToContent(list.orderid)"> <span
原生js实现手机端上下滑动一次一屏
qq_38839208的博客
03-31 1862
原生js实现手机端上下滑动一次一屏 一次项目没看见UI写的注释，发现一个响应式网站需要实现在手机端的时候屏幕滑动一下，滚动一屏，当时已经快要写好，不想使用swiper重写，懒得码页面，就想用js控制屏幕滚动。网上找了一堆，控制dom干啥的，还是得改页面加类名。就自己写了一个。 思路：获取当前设备高度，文档距顶部的高度scrolltop，监听手指滑动事件，滑动超过一段距离判断值的正负来确定是上滑，还...
移动端上下滑动事件之--坑爹的touch.js
热门推荐
minidrupal的专栏
09-27 1万+
移动端页面的盛行，微信的便利的页面推广等等，让越来越多的css3效果和html5在手机端大放异彩。 于是乎，各式各样的简约酷炫的html5页面层出不穷，最多的就是视差滚动+css3动画。 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面，坑爹的touch.js的上下滑动（swipe）事件失效。
移动端滑动、滚动、点击三种事件
weixin_30830327的博客
07-27 576
首页页面是进入半屏幕状态，当往上滑动时，不超过四分之一屏幕就返回半屏状态，当往上滑超过四分之一屏幕就让列表在顶部，到顶部的时候，往上触摸时，出现滚动，当往下触摸滑时到了顶部后在后往下，要是没有到达四分之一屏幕就返回顶部状态。 这里就出现了当到达顶部，不能滚动，在监听的时候touchmove后面加了event.preventDefault();就不能滚动了，所以判断是否在顶部在顶部就不执行t...
移动端滑动事件方法
齐枫的博客
01-05 2644
今天使用jquery.fullpage.js的时候，发现移动端调试不支持滑动事件，于是自己写了一个滑动的事件，如下，使用这个插件时只需要给window绑定一个滑动事件就可以了，不需要添加方法，由于第一次使用，还没看他js的具体信息，只是粗略过了一眼，好，具体内容看代码： <!DOCTYPE html> <html lang='en'> <head> ...
JavaScript 监听手机端的touch滑动事件（滑动手势）
For_My_Own_Voice的博客
08-09 6924
如何监听移动端滑动手势（上 / 下 / 左 / 右滑动），今天记录下。 var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI; }; //根据起点终点返回方向 1向上滑动 2向下滑动 3向左滑动 4向右滑动 0点击事件 func...
移动端网页上下滑动的事件
weixin_33824363的博客
07-13 1058
前面写过1篇 jquery mobile.js的swipe事件，来实现开关按钮的效果。查看资料后发现，swipe事件左右事件，移动端的上下滑动事件并不是用swipe. 网上搜索之后，发现移动端的原生事件touch可以解决这个问题。touch事件 本文例子的要求是：上下滑动超过给定的像素，隐藏/显示页面的元素。开始是隐藏的状态。 注意，touch事件并需要引入任何的js库。 &lt...
通过touch事件手写实现页面在移动端的触屏滚动功能
榕树岛
03-19 6842
本文主要利用touch事件，实现了在触屏上的触摸滚动页面功能，类似手机浏览器上原生的触屏滚动事件。 目前在PC和移动端的浏览器环境中，在有原生的鼠标滚轮滚动和触屏滚动功能的情况下，这个功能的使用场景应该是极其有限的。 写这个小功能的起因是：上周临时接手一个集成了chromium内核的客户端CS项目，完成demo后部署到surface上，鼠标滚轮滚动页面效果正常，但触屏不能滚动页面，...
-vue.js学习笔记
01-10
"这篇文档是关于Vue.js的学习笔记，涵盖了日期对象的操作和JavaScript中的事件处理。" 在Vue.js的学习过程中，了解JavaScript的基础语法是至关重要的，其中包括对日期对象的处理。在JavaScript中，我们可以创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值