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

最新推荐文章于 2021-12-03 10:36:00 发布
最新推荐文章于 2021-12-03 10:36:00 发布
阅读量643 收藏 1
点赞数
分类专栏： VUE小项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41797053/article/details/82588726
版权

这里写图片描述

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

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

cold-coffee
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue利用better-scroll实现轮播图与页面滚动详解
08-29
在我们日常的项目开发中，处理滚动和轮播图是再常见不过的需求了，下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
vue-seamless-scroll列表循环滚动插件
Lval的博客
11-26 3651
安装 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 569
better-scroll使用方法 better-scroll vue滚动 无限加载 vue滚动加载
是一款基于vue2.0的滚动条插件。
weixin_33729196的博客
11-30 161
2019独角兽企业重金招聘Python工程师标准>>> ...
vue-seamless-scroll使用中遇到关于click的问题
weixin_43254676的博客
06-28 1万+
使用vue-seamless-scroll实现数据无缝连续滚动 基本原理是把要滚动的部分复制一份，滚动这两部分相同的内容，进而实现无缝连续滚动 遇到的问题 当ul1中的数据未滚动完，此时可见区域内一部分数据为ul1，一部分数据为ul2,ul2 部分的click事件不起作用，无法实现功能 简单分析 第二部分无法操作和js的运行机制有关，需要重新绑定事件，具体原理也是一知半解，但是大致感觉问题是由...
vue使用better-scroll实现菜单列表左右联动
07-13
而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者浏览器上实现高性能、易用的滚动效果。在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 ...
vue better-scroll插件使用详解
08-28
本篇文章主要介绍了vue better-scroll插件的使用详解，better-scroll是一个移动端滚动的解决方案，它基于iscroll的重写，具有强大的功能，可以实现普通的滚动列表、轮播图、picker等等。 better-scroll的使用需要在...
vue.js2.0 实现better-scroll的滚动效果实例详解
10-18
better-scroll 是一个移动端滚动的解决...better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等，下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果，感兴趣的朋友一起看看吧
vue2.0 better-scroll 实现移动端滑动的示例代码
08-28
本文主要介绍了使用 Vue2.0 和 Better-Scroll 实现移动端滑动的示例代码，着重于左右联动效果的实现方法。 Better-Scroll 介绍 Better-Scroll 是一个 JavaScript 库，用于实现移动端滑动效果。它提供了多种滑动...
详解 vue better-scroll滚动插件排坑
08-28
纵向滚动的实现可以通过使用 BetterScroll 来实现，下面是一个简单的示例代码： ```html <li v-for="item in 8">{{item}} import BScroll from 'better-scroll'; export default { mounted() { ...
vue插件 vue-seamless-scroll 无缝滚动
zqyzqy22的博客
04-17 908
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不触发问题
weixin_49577940的博客
12-02 1095
项目里有一个无缝滚动的列表效果 , 用的vue-seamless-scroll 插件 , 可以实现列表滚动没问题 , 但因为列表每一条都有click事件 , 最近发现总是有一条点不动 , 审查元素发现是： 当第一个ul中的数据滚动完时,第二个ul 里的li的click事件不起作用 解决方法 这是之前的写法（可以循环显示，点击第一个ul里的li可以触发click事件，但是点击第二个ul里的li不能触发click事件) , 关于vue-seamless-scroll的一些配置可以看我另一篇
vue仿今日头条_微信小程序仿今日头条导航栏滚动解析
weixin_39827034的博客
02-05 782
项目需要，做一个和今日头条一样的导航栏，可以横行滚动，幸好再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 103
simple-wxmp-vueify介绍既有项目无法重构，但想在某些页面的JS中使用vue的语法？不想手动调用小程序内的setData()？这个库可能帮你解决一些问题。特性使用ES6的proxy实现对page.data的代理支持在代码中使用this.xxx表示data属性支持计算属性支持响应式更新视图，不用手动setData使用Demo欢迎提issue或pr :)项目地址$ git clone h...
Better-Scroll2.0的用法注意事项
Coralpapy的博客
08-28 654
1. 对于better-scroll插件，是包含了所有的插件的，体积较大 安装方式：npm install better-scroll --save 2.但是，BetterScroll2.0开始可以按需加载插件但是，如果只想实现基本功能，就只需要装 （1） import BScroll from "@better-scroll/core"; （2） 其他的附加功能就额外安装，例如上拉加载，下拉更新这些 import PullDown from "@better-scroll/pull..
如何使用better-scroll以及遇到滑动失效等问题（vue）
weixin_57286220的博客
12-03 2225
当我们在移动端上进行触控滑动的时候，明明代码写的没有什么问题，但就是滑动十分的不流畅，用了很多css样式和数据优化都改变不大，于是在尝试用better scroll了之后，解决了这个问题。 但在第一次尝试使用的时候，遇到了引入了better scroll，但就是页面组件里不滑动。（我使用的是在页面中单个组件滑动） 总结了一下，有一下几点在使用的时候需要注意的地方： 1:首先就是在需要滑动的组件中引入（先npm下好组件） import BScroll from "better-scroll"; 2:一定要在
H5页面（四）效果之实现页面滚动--------better-scroll插件
热门推荐
斗师——Ace
06-07 1万+
添加小程序，兑换各种视频教程/数据资源。 下载并用better.scroll.js文件；<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script> 中文文档：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/ 1...
better-scroll在vue项目中的使用
深谷逸风的博客
12-21 1万+
插件主要用于有滚动区域时替代浏览器自带的滚动
vue2 vue-seamless-scroll插件使用
最新发布
06-04
在Vue组件中使用vue-seamless-scroll： ``` <vue-seamless-scroll> <li v-for="(item, index) in items" :key="index">{{ item }} </vue-seamless-scroll> import VueSeamlessScroll from 'vue-seamless...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值