vue-h5应用情景滚动使用的想法

最新推荐文章于 2022-11-27 19:42:03 发布
原创 最新推荐文章于 2022-11-27 19:42:03 发布 · 347 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了H5应用中滚动监听的实现方法，尤其是在使用ISCROLL遇到的问题及解决方案。通过对content区域滚动行为的监听，文章对比分析了不同技术方案的优劣。

H5应用中大多数产品会规划固定的header和footer,中间content区遍历数据进行渲染list组件，在全局监听滚动是不能实现的，应用就只有窗口这么高，滚动的是content区域，因此要在content组件上监听，而最近接的一个项目，用了ISCROLL，渲染的list底层还有子组件，在父组件（content）上监听之后根据业务逻辑数据在三层组件之间传递起来十分麻烦，Iscroll每次dom更新之后都要refresh,最后弃用，目前用getBoundingClientTop()顶了一下，H5这个滚动思想还是用history模式下的vue路由自带的滚动行为好一些

AlexDQ
关注
H5滑动实现翻页（vue）
qq_42894622的博客
05-04 7212
H5 滑动翻页 框架：Vue + element + JQ + vue-awesome-swiper 项目：H5绣红旗 转载：vue-awesome-swiper - 基于vue实现h5滑动翻页效果 已经打好vue-cli项目，安装vue-awesome-swiper npm i --s vue-awesome-swiper main.js import VueAwesomeSwiper...
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
shuux666的博客
03-03 1055
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
HTML5移动端项目心得,vue h5 移动端各项目总结
weixin_33301547的博客
07-16 321
1、场景：h5页面在浏览器中，push路由，然后使用浏览器回退，又能回到原页面；此时使用带参数 this.$router.push({name: 'video', replace:true, query:{id}})或this.$router.replace('/video?id='+ id);或this.$router.replace('/video');2、场景：在当前页面replace且需要...
vue数字滚动
Chou_Junn的博客
10-18 362
如图封装了一个vue数字滚动模板 <template> <div> <ys-numRun :number="number"></ys-numRun> </div> </template> <script> export default { name: ...
vue 编写H5项目使用BScroll “better-scroll“；两边都滚动，并且联系
qq_61570843的博客
08-11 986
4.先挂载实现滚动效果，外层盒子要设置溢出隐藏。2.组件中引入better-scroll。1.先下载better-scroll。5.实现右边滚动联系左边。6.左边点击使其左边滚动。3.先展示html代码。7.完成附上完整代码。
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
热门推荐
seeeeeeeeeee的博客
08-03 1万+
vue-vant实现仿微信聊天界面，上下固定中间滚动自适应高度。移动端聊天功能，H5聊天功能实现。
vue 常见应用场景
想飞的猪的博客
12-15 3089
1.this.$refs.wrapper获取为underfind 原因：获取不到DOM节点，还没有渲染完成就获取，所以获取回来的是underfind,造成的原因有多重，在我的案例中造成功的原因是在这个div内使用了v-if 这里使用v-if时获取不到，v-if跟v-show的区别在于v-show只是隐藏，DOM元素还存在；归结原因就是DOM节点还没有渲染就去获取 解决方法：v-if改为v-s...
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 1233
微信小程序和uni-app面试高频知识点
vue实现上下滑动翻页_vue实现h5滑动翻页
weixin_39611722的博客
12-18 1781
{"optioninfo":{"dynamic":"true","static":"true"},"simplifiedDisplay":"newSimpleInfoCard","newCard":[],"card":[],"search":[],"infoCard":[{"bannerTitle":"移动研发平台 EMAS，爆款产品0元试用","bannerContent":"一站式研发平台快速...
vuejs实现数字变化上下滚动动画效果
GothaM24的博客
06-10 5514
一、前言 在做统计分析的时候，前端需要对一串数字进行处理，当数字改变，变大或者变小的时候，能有滚动效果 话不多说，直接上代码 二、实现 效果（原谅我不会截动图，但是数字上下滚动的效果真的有。。。。） html <div class="chart-m-l-c"> <label>诉讼参与人总数</label> <div class="count"> <b v-for="(item, index) in prosecutorArr" :key="in
vue+h5 屏幕滑动
weixin_45454281的博客
04-29 1164
vue+移动端禁止与允许屏幕滑动监听屏幕是否滑动如何判断用户是移动端还是pc端 禁止与允许屏幕滑动 最近用vue写公司移动端官网,类似抽屉效果，侧边栏展开，右侧禁止滑动 //点击icon控制侧边栏显示隐藏 classifyClick(type){ if(type === 'del' ){ this.classifyShow = false //点击关闭按钮,去除禁止屏幕滑动监听 document.body.removeEventListener('touchmove', this.noUpO
vue做多行滚动广告牌
鹿哥
08-06 815
vue做多行滚动广告牌 利用vue可以很方便的做多行滚动广告牌的，内容和行数自己设定。滚动的方式也可以自己去优化和改进，现在说一下实现方式。利用的是数组的元素移动的原理。真正实现滚动效果的是vue里面对数据的操作。 ps：没有考虑这种方式的消耗等，只是一种实现方式。 h5代码： <div class="notice"> <div class="noticeTitle"> <span>公&nbsp;&nbsp;告</spa
滑动窗口简介及应用
guotianqing的博客
08-24 3757
简介 了解过TCP协议的同学应该都知道滑动窗口的概念。 TCP协议中，数据的发送方和接收方都会使用滑动窗口来控制数据的收发。 它有以下优点： 避免等待 流量控制 效率高 滑动窗口的使用避免了数据重复校验，在字符串匹配等场合有多应用。 实现 一个窗口由两个标志位决定： 左指针指向窗口的左边界 右指针指向窗口的右边界 在移动时，按以下流程： 固定左边界 右边界移动 当满足条件时，移动左边界 例如在TCP的发送端，假设窗口长度为4，则： 固定左指针0 右边界为3 接收到无遗漏的ack后，移动左边
优化h5的滚动功能：在vue和react中使用better-sroll插件的踩坑笔记
world12312312的博客
05-21 1059
使用better-scroll插件实现滚动效果和功能
vue滑动选择器(一键开启时间选择器)
jiangji1的博客
06-06 6260
vue滑动选择器(一键开启时间选择器) 直接上demo npm i time_check_jiangji 之后直接用 <template> <div class="A"> <div @click="showFn">开</div> <Time v-if="show" :arr="arr" :value="value" @cli...
vue开发H5，遮罩层下方内容禁止滑动（滚动）
初心 - 杨瑞超个人博客
03-19 6111
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 解决办法，直接在遮罩层所在的div加上“ @touchmove.prevent ” 即可 <div @touchmove.prevent>这是遮罩层的div</div> ...
vue watch用法及场景
前端恶霸
12-05 2484
这两天在做一个公司项目，遇到一个问题，一个子组件要改变父组件的data值，并且需要把这个值传给其他兄弟组件，这时候发现其他兄弟组件的data值没有变换还是最初父组件传的值，如下图   这时候就用到watch来进行监听了 props: ['moneys'], data() { return { money:this.moneys, ...
vue实现浮动广告（浏览器范围内匀速移动）
h5_since的博客
10-29 2210
原理：写一个让dom匀速移动的方法，然后用定时器每隔一定时间调用这个方法，下面直接上代码 <template> <div> <div id="thediv" ref="thediv">我是浮动广告</div> </div> </template> export default { data() { return { xPos:300, yPos:200, step:
轻松安装使用vue-devtools调试chrome中的Vue应用
- vue-devtools在调试生产环境的Vue应用时可能受到限制，因为生产模式下很多信息被压缩或者移除，建议在开发或测试环境下使用vue-devtools进行调试。 ### 结语 vue-devtools作为一个高效的Vue.js调试工具，它极大...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值