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

最新推荐文章于 2022-08-03 14:30:54 发布
最新推荐文章于 2022-08-03 14:30:54 发布
阅读量277 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlexDQ/article/details/80168593
版权

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

AlexDQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-h5-template
03-28
cd vue-h5-template yarn install yarn dev 目录 √ vite √ 配置多环境变量 √ viewport 适配方案 √ 多 UI 组件库供选择 √ Pinia 状态管理 √ vue-router 4 √ axios 封装及接口管理 √ vite.config.ts 基础...
vue 编写H5项目使用BScroll “better-scroll“；两边都滚动，并且联系
最新发布
qq_61570843的博客
08-11 881
4.先挂载实现滚动效果，外层盒子要设置溢出隐藏。2.组件中引入better-scroll。1.先下载better-scroll。5.实现右边滚动联系左边。6.左边点击使其左边滚动。3.先展示html代码。7.完成附上完整代码。
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
seeeeeeeeeee的博客
08-03 8354
vue-vant实现仿微信聊天界面，上下固定中间滚动自适应高度。移动端聊天功能，H5聊天功能实现。
H5滑动实现翻页（vue）
qq_42894622的博客
05-04 6863
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...
vue实现浮动广告（浏览器范围内匀速移动）
h5_since的博客
10-29 1995
原理：写一个让dom匀速移动的方法，然后用定时器每隔一定时间调用这个方法，下面直接上代码 <template> <div> <div id="thediv" ref="thediv">我是浮动广告</div> </div> </template> export default { data() { return { xPos:300, yPos:200, step:
vue-fabric-h5-editor.rar
08-10
Vue+Fabric.js实现H5 移动端简单的图片的可视化编辑、预览、下载等功能。 文本编辑：实现画布上的文本框的添加、字体属性的设置、样式风格编辑、背景颜色个性化设置、文本内容的设置等； 图片上传：点击上传图片，...
vue-h5-activity-components:h5移动端组件
05-25
"vue-h5-activity-components" 正是这样一个专为H5移动端设计的UI组件库，它集合了多个常用的交互组件，使得开发者可以快速搭建出美观且易用的移动应用界面。 这个组件库基于Vue.js，充分利用了Vue的特性，如虚拟...
vue-h5-template:使用Vue3.0+Typescript+Vant搭建移动端H5页面开发所需的基础模板，并提供一些通用型的解决方案及扩展功能
05-03
VUE-H5-TEMPLATEVue-H5-Template 项目以小商城作为基本的内容演示，使用 Vue3.0+Typescript+Vant 搭建 移动端h5页面 开发所需的基础模板，并提供一些通用型的解决方案及扩展功能。基本说明部分页面预览：首页商详...
优化h5的滚动功能：在vue和react中使用better-sroll插件的踩坑笔记
world12312312的博客
05-21 916
使用better-scroll插件实现滚动效果和功能
滑动窗口简介及应用
guotianqing的博客
08-24 3550
简介 了解过TCP协议的同学应该都知道滑动窗口的概念。 TCP协议中，数据的发送方和接收方都会使用滑动窗口来控制数据的收发。 它有以下优点： 避免等待 流量控制 效率高 滑动窗口的使用避免了数据重复校验，在字符串匹配等场合有多应用。 实现 一个窗口由两个标志位决定： 左指针指向窗口的左边界 右指针指向窗口的右边界 在移动时，按以下流程： 固定左边界 右边界移动 当满足条件时，移动左边界 例如在TCP的发送端，假设窗口长度为4，则： 固定左指针0 右边界为3 接收到无遗漏的ack后，移动左边
vue+h5 屏幕滑动
weixin_45454281的博客
04-29 868
vue+移动端禁止与允许屏幕滑动监听屏幕是否滑动如何判断用户是移动端还是pc端 禁止与允许屏幕滑动 最近用vue写公司移动端官网,类似抽屉效果，侧边栏展开，右侧禁止滑动 //点击icon控制侧边栏显示隐藏 classifyClick(type){ if(type === 'del' ){ this.classifyShow = false //点击关闭按钮,去除禁止屏幕滑动监听 document.body.removeEventListener('touchmove', this.noUpO
JS实现转动随机数抽奖的特效代码
hello_katty的专栏
08-05 4049
现在抽奖游戏应用的非常广泛，我们每个人都会接触到，尤其是节假日的时候各大商场都会组织这种类型的游戏活动吸引顾客，我上面分享的这段代码其实还有很多可以改进，丰富的地方，比如我们可以美化它的界面，功能更加丰富，还有我们可以考虑转动随机数抽奖的速度，决定在哪一格变慢等。
vuejs实现数字变化上下滚动动画效果
GothaM24的博客
06-10 5230
一、前言 在做统计分析的时候，前端需要对一串数字进行处理，当数字改变，变大或者变小的时候，能有滚动效果 话不多说，直接上代码 二、实现 效果（原谅我不会截动图，但是数字上下滚动的效果真的有。。。。） html <div class="chart-m-l-c"> <label>诉讼参与人总数</label> <div class="count"> <b v-for="(item, index) in prosecutorArr" :key="in
vue开发H5，遮罩层下方内容禁止滑动（滚动）
初心 - 杨瑞超个人博客
03-19 5962
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 解决办法，直接在遮罩层所在的div加上“ @touchmove.prevent ” 即可 <div @touchmove.prevent>这是遮罩层的div</div> ...
vue项目中滚动到某元素位置
热门推荐
qq506930427的博客
12-10 1万+
1.使用a标签+#号 &lt;a href="#box1"&gt;我跳到box1&lt;/a&gt; &lt;div id="box2"&gt;&lt;/div&gt; 上面这一种的缺点是，url会发生改变，会在url最后面加上片段识别符#box2，这样就改变了URL的路径，这是我们不想看到的。因为再次刷新的时候回出现问题。当使用 vue-router回退时，发现需要回退很多次。 2.s...
不用插件vue实现滚动加载
wangle_style的博客
05-16 6808
关键所在是实现滚动到底部，然后进行post请求，然后将获得的分页的数据push到数组中1，在data中定义三个变量page,isadd,data_wrpa其中page是控制分页的，isadd是控制是否post的，data_wrpa是数据的容器2，给容器绑定scroll事件&lt;ul class="left_li_ul" @scroll="gd_add"&gt;              &lt;...
H5实现中奖记录逐行滚动切换效果
Web+
03-12 8370
前端页面需先引入jquery<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中奖记录跑马灯特效</title> <script src="../js/jquery-2.2.0.min.js"></script> <script src="../js/recordRoll.js"
vue滑动选择器(一键开启时间选择器)
jiangji1的博客
06-06 5999
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做多行滚动广告牌
鹿哥
08-06 702
vue做多行滚动广告牌 利用vue可以很方便的做多行滚动广告牌的，内容和行数自己设定。滚动的方式也可以自己去优化和改进，现在说一下实现方式。利用的是数组的元素移动的原理。真正实现滚动效果的是vue里面对数据的操作。 ps：没有考虑这种方式的消耗等，只是一种实现方式。 h5代码： <div class="notice"> <div class="noticeTitle"> <span>公&nbsp;&nbsp;告</spa

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值