使用vue-better-scroll中遇到无法滚动的问题

最新推荐文章于 2023-12-28 09:04:54 发布

wherewhyi

最新推荐文章于 2023-12-28 09:04:54 发布

阅读量2k

点赞数 7

分类专栏： vue-better-scroll 文章标签： vue

本文链接：https://blog.csdn.net/java_wzh123/article/details/108647002

版权

在使用vue-better-scroll组件时，若通过ajax从父组件动态传递数据，可能会遇到无法滚动的问题。原因在于数据加载异步，初始时better-scroll已根据空数据渲染。解决方案包括在watch中利用nextTick或在mounted中调用better-scroll的更新方法。

摘要由CSDN通过智能技术生成

记录一下使用vue-better-scroll中遇到的问题

  mounted () {
   
    this.scroll = new Bscroll(this.$refs.wrapper, {
   
      mouseWheel: true,
      click: true,
      tap

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wherewhyi

关注关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue使用better-scroll实现菜单列表左右联动

07-13

在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。首先，我们需要了解 Better-Scroll 的基本用法。Better-Scroll 提供了丰富的滚动功能，包括但不限于横向滚动、...

better-scroll在vue中使用出现的不滑动问题

qq_37609418的博客

12-09

1468

今天在vue中使用better-scroll时，发现第一次加载后页面无法滚动。去查了相关问题后发现了一大堆的解决方案，汇总后：首先检查代码，content高度是否大于warpper、样式是否写错，确认代码没有问题的情况下，可以考虑是否是，Dom加载问题，因为如果BetterScroll无法计算出高度，会出现这个问题，可以通过nextTick()或者在scroll事件中添加refresh()方法来重新计算高度添加refresh附上代码： mounted() { // ref绑定在.

参与评论您还未登录，请先登录后发表或查看评论

Vue中，将父组件请求的后端数据传值给子组件props

看见小狮子没

09-11

2034

案例。

关于使用better-scroll刷新页面后无法滚动的问题

Uozumi的博客

07-26

363

加个observeDOM:true就可以了 mounted () { this.bs = new BetterScroll(this.$refs.wrapper, { observeDOM: true, //加上这个 click: true }) }

Vue中父组件向子组件传值，子组件没有接收到

Astronaut224的博客

11-03

4857

父组件调用接口获取数据，然后通过props传值给子组件，子组件拿到数据后渲染到 el-table 表格组件中。结果子组件没有将数据渲染到表格中，但是控制台打印是获取到数据的。

Vue父组件拿到接口的数据，并把数据传给子组件的问题；同时，父组件数据更新，子组件同样拿到新数据的问题

m0_63834711的博客

08-25

4908

在vue中，有时需要在父组件页面调用接口时，并把数据传给子组件。一般的做法中，子组件拿不到父组件传过来的值。原因是什么捏？？？原因就是：父组件跟子组件获取数据是同时进行的，自然而然，子组件拿到的是父组件传过来的空数据。父组件都还在调用接口拿数据，子组件就已经开始拿了，理想当然的拿不到嘛~要把formData传过去只需这样，子组件就能拿到有值的数据了。。。

vue-better-scroll 的使用实例代码详解

10-17

在Vue中使用Vue-better-scroll #### HTML结构在Vue模板中，定义需要滚动的元素，并为它们添加相应的ref属性。例如，一个商品列表页面包含菜单和食品列表，可以定义如下结构： ```html <div class="menu-...

详解 vue better-scroll滚动插件排坑

08-28

然后，我们使用 BetterScroll 来实例化滚动对象，并将其应用于 wrapper 元素中。横向滚动的实现与纵向滚动类似，唯一的区别是将固定高度改为固定宽度。下面是一个简单的示例代码： ```html ...

vue使用better-scroll实现滑动以及左右联动

10-15

以下是对如何在Vue项目中集成和使用Better Scroll进行详细说明。 **一、引入Better Scroll** 在你的项目中引入Better Scroll可以通过以下步骤： 1. 在`package.json`文件中添加依赖，例如："better-scroll": "^...

vue better-scroll插件使用详解

08-28

然而，在使用better-scroll时，需要注意Vue的数据更新是异步的，better-scroll无法获取目标内容的高度，导致无法滚动的问题。解决这个问题可以使用Vue的nextTick()方法，例如： Vue.nextTick(function () { // DOM...

处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题

weixin_38900656的博客

04-09

2426

vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题

vue 父组件传参给子组件，而子组件获取不到

最新发布

Zhong_zong_ming的博客

12-28

1247

如果在组件的created或mounted生命周期中定义要给方法，在子组件渲染时就获取父组件的传值，并进行新数据的获取并进行页面渲染，但此时父组件请求的数据可能还没有完全返回，子组件就开始使用此数据，该数据自然不存在，打印在控制台中的父组件穿给子组件的参数 undefined，因此就会出现父组件传参不及时，子组件使用数据较早，造成数据无法使用。使父组件从接口中获取的参数，有充分的时间传输，在子组件使用时，等待父组件的参数到来再执行，就不会出现拿不到父组件的传参问题了。1.setTimeout 定时器。

Vue父组件传给子组件数据,子组件得不到数据解决方法

m0_49714202的博客

07-21

1万+

Vue父组件传给子组件数据,子组件得不到数据解决方法

vue父组件向子组件传对象，不实时更新解决

weixin_30949361的博客

08-27

1044

vue报错：void mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being ...

Vue 父组件传值子组件无效

weixin_46050018的博客

02-03

3182

vue子组件接收数据无效，生命周期问题（已解决）

vue父组件异步获取数据子组件不显示

Jack, what else can you do besides holding your little darling?

12-28

2834

vue父组件异步获取数据子组件不显示

vue父组件传数据给子组件，子组件watch这个数据第一次有效，刷新页面就无效（同时解决请求数据时间过长，导致子组件过早渲染而无法获取到最新数据的问题）

m0_46694056的博客

09-23

2951

需求&问题本文废话有点多，但我觉得有些业务场景应该也会有人遇到，索性还是把需求和问题都写详细点，看各位路过的朋友不说能解决你的问题，哪怕是对你有一点点帮助的，我也就很高兴了的????，嫌废话多的，直接看图应该就懂我的意思，我只留了关键的代码… 问题1：本来是要向后台请求数据的，但是由于数据过大，后台需要处理，所以整个请求时间过长，可是我就是要拿到这个请求数据传给子组件，但实际上假如请求时间需要5s，而子组件渲染完成只需要3s，那就取不到数据了，我想到的解决办法有：法1：在子组件使用

Vue——父子组件间异步动态获取数据传递数据时，子组件获取不到值或者延时获取