vue2.0中better-scroll插件使用---实现页面滚动

最新推荐文章于 2024-09-06 14:45:37 发布
最新推荐文章于 2024-09-06 14:45:37 发布
阅读量719 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE小项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41797053/article/details/82588726
本文探讨了Vue中由于数据异步加载导致Bscroll无法正常工作的问题，并介绍了一种解决方案：利用Vue的nextTick方法确保DOM更新后再进行滚动操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里写图片描述

上图是HTML中设置锚点，下图是js中引入文件并使用
——–遇到的问题=>Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象

——–为了解决上面的问题,运用Vue的nextTick();
(简单说，因为DOM至少会在当前tick里面的代码全部执行完毕再更新）
这里写图片描述

vue.js2.0 实现better-scroll的滚动效果
至情相遇的博客
08-12 448
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在 这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 <template> <div> <div class="goods...
vue利用better-scroll实现轮播图与页面滚动详解
08-29
在我们日常的项目开发中，处理滚动和轮播图是再常见不过的需求了，下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
vue-seamless-scroll列表循环滚动插件
Lval的博客
11-26 3819
安装 npm install vue-seamless-scroll --save 引入 import vueSeamlessScroll from "vue-seamless-scroll"; export default { components: { // circleBg, vueSeamlessScroll } } 使用 <vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="clas
vue2.0使用better-scroll
huanhuan03的博客
12-24 678
better-scroll使用方法 better-scroll vue滚动 无限加载 vue滚动加载
是一款基于vue2.0的滚动条插件。
weixin_33729196的博客
11-30 196
2019独角兽企业重金招聘Python工程师标准>>> ...
vue中使用better-scroll实现横向滚动不生效
感恩、奋进、自信
05-07 7051
vue中实现横向滚动不生效，如下图红圈中所示：红圈中的html在seller.vue中的&lt;template&gt;内容如下&lt;div class="pics"&gt; &lt;h1 class="title"&gt;商家实景&lt;/h1&gt; &lt;!--因为图片要横向滚动，那么父级就要设定一个固定宽度--&gt; &
vue-seamless-scroll(二)点击事件
最新发布
LovelyLittleCub的博客
09-06 714
在表格数据滚动的时候想要点击某一行获取当前行的数据，但是当数据在第二轮数据滚动的时候点击没有反应，获取不到数据，该怎么解决？首先需要在父级添加一个点击事件，然后在这一行添加相同的类名，这样点击这一行就可以获取当前行的数据了。
vue-seamless-scroll使用中遇到关于click的问题
weixin_43254676的博客
06-28 1万+
使用vue-seamless-scroll实现数据无缝连续滚动 基本原理是把要滚动的部分复制一份，滚动这两部分相同的内容，进而实现无缝连续滚动 遇到的问题 当ul1中的数据未滚动完，此时可见区域内一部分数据为ul1，一部分数据为ul2,ul2 部分的click事件不起作用，无法实现功能 简单分析 第二部分无法操作和js的运行机制有关，需要重新绑定事件，具体原理也是一知半解，但是大致感觉问题是由...
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理
热门推荐
仙魁XAN
08-05 1万+
Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，vue 中添加 vue-seamless-scroll，简单实现自动无缝滚动的效果，并对应添加点击事件 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。vue-seamless-scroll 是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能。...
vue插件 vue-seamless-scroll 无缝滚动
zqyzqy22的博客
04-17 954
vue插件 vue-seamless-scroll 无缝滚动官网：安装引入配置 官网： https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 安装 npm install vue-seamless-scroll --save 引入 import vueSeamless...
vue-seamless-scroll使用中遇到关于click点击无效问题
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-11 3161
遇到的问题：当第一个ul中的数据滚动完时,第二个ul 部分的click事件不起作用，无法实现一些点击这行 解决思路：利用js事件委托机制 原来是在li里面绑定事件出现上述问题，后来给最外层的父级div加委托事件，让父级事件执行。 通过e.target.dataset.code 获取所需值 备注： vue中自定义属性格式为 data-xxx 获取为：e.target.dataset.xxx id 和 name ......
Vue中滚动插件vue-seamless-scroll的安装与使用
qq_44659327的博客
09-02 2460
npm安装： npm install vue-seamless-scroll --save 页面中引入组件： import vueSeamlessScroll from 'vue-seamless-scroll' 页面中调用组件： components: { vueSeamlessScroll }, 在页面的computed中定义变量 computed: { classOption () { return { step: 0.4, // 数
vue-seamless-scroll 的click不触发问题
@必意玲
07-01 4913
因为需要做一个无限滚动的table效果，然后百度了一下，看到网上挺多用 vue-seamless-scroll 的，然后自己就用了。后面一些问题给大家总结下。 使用很简单，这里就不阐述了，主要讲下用这个的一些业务要求，遇到的问题。 无限滚动原理：无限滚动的原理就是把之前的遍历的内容复制一份，滚动这两部分内容，达到无缝滚动效果。 需求：首先需要一个这样的需求，才能碰到这个问题（通过点击列展示详情数据） 遇到的问题一： 当第一个ul中的数据滚动完时,第二个ul 部分的click事件不起作用，无法实现一些点击
vue-seamless-scroll插件点击事件失效
qq_52441253的博客
01-31 410
vue-seamless-scroll插件点击事件失效。
vue-seamless-scroll插件使用后点击事件无效
JiAyInNnNnN123的博客
02-16 5167
场景：当前使用vue-seamless-scroll包裹了一个滚动div 的list，当前list中的div需要点击进行其他逻辑处理 问题：部分div点击不触发点击事件 原因：因为vue-seamless-scroll中间包裹的dom复制渲染，没有带上dom的事件导致。 解决方式：使用事件委托。 在vue-seamless-scroll外部的div添加点击事件，获取$event的target <div class="scroll-list" v-if="safeData.brandList" @cl
vue仿今日头条_微信小程序仿今日头条导航栏滚动解析
weixin_39827034的博客
02-05 875
项目需要，做一个和今日头条一样的导航栏，可以横行滚动，幸好再weui里面看到了类似的例子地址：https://weui.shanliwawa.top/demo/js4.html，使用iscroll-lite.j实现，weui自己封装了一层，vue中实现代码：{{group.name}} 初始化：mounted() {setTimeout(function() {TagNav("...
微信小程序vue轮播图_小轮子：无需重构，向下兼容，在既有项目中用vue的方式开发微信小程序...
weixin_29903043的博客
01-14 134
simple-wxmp-vueify介绍既有项目无法重构，但想在某些页面的JS中使用vue的语法？不想手动调用小程序内的setData()？这个库可能帮你解决一些问题。特性使用ES6的proxy实现对page.data的代理支持在代码中使用this.xxx表示data属性支持计算属性支持响应式更新视图，不用手动setData使用Demo欢迎提issue或pr :)项目地址$ git clone h...
Vue常用插件汇总
2401_84150191的博客
04-13 3522
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取[外链图片转存中…(img-wmj3LHAs-1712977961250)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-uMrKd7zw-1712977961251)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
Vue2.0中vue-scroll组件封装与使用教程
在Vue2.0项目中使用vue-scroll组件之前，首先需要将其安装到项目中。可以通过npm或者yarn来安装vue-scroll： ```shell npm install vue-scroll --save # 或者 yarn add vue-scroll ``` 安装完成后，在需要使用的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值