【vue】better-scroll滚动不全

2023-11-04

项目场景:

移动端content内容可以滚动


问题描述

部分组件滚动不全


原因分析:

接口获取图片数据需要时间,而better-scroll里的scrollHeight已经预先计算出可滚动高度,导致后面加载出来的图片无法滚动


解决方案:

方法一

Scroll.vue

 mounted () {
      // 解决图片加载导致滚动不全问题
      // 方法一
      this.scroll = new BScroll(this.$refs.wrapper, {
        observeDOM: true
      })
      // 方法二:
      // this.$nextTick(() => {
      //   this.scroll = new BScroll(this.$refs.wrapper, {})
      // })

    },
    方法三 添加updated方法
     updated () {
      //解决better-scroll因为图片没有下载完导致的滚动条高度不够,无法浏览全部内容的问题。
      //原因是better-scroll初始化是在dom加载后执行,此时图片没有下载完成,导致滚动条高度计算不准确。
      //利用图片的complete属性进行判断,当所有图片下载完成后再对scroll重新计算。
      let img = document.getElementsByClassName('content')[0].getElementsByTagName('img')
      let count = 0
      let length = img.length
      if (length) {
        let timer = setInterval(() => {
          if (count == length) {
            // console.log('refresh')
            this.scroll.refresh()
            clearInterval(timer)
          } else if (img[count].complete) {
            count++
          }
        }, 100)
      }

    },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【vue】better-scroll滚动不全 的相关文章

随机推荐

  • JavaScript 学习笔记之概述

  • Numpy 中clip函数的使用

    Numpy 中clip函数的使用 numpy clip a a min a max out None source 其中a是一个数组 后面两个参数分别表示最小和最大值 怎么用呢 老规矩 我们看代码 import numpy as np x
  • 掌优刷脸支付已经具备商业化能力

    人脸识别支付是一款基于面部识别系统的支付应用 支付时消费者只需要面对自助终端屏幕上的摄像头 系统会获取用户面部信息并将面部信息与支付宝账户关联 通过支付宝账户进行费用支付 整个交易过程十分便捷 首次刷脸支付 在 刷脸页面 进行面部识别 输入
  • (一)Word中如何将表格断开,并且增加空的一行

    在使用word中表格时 有时候希望从当中断开 并且在中间添加一行空白 方便添加文字 如下图所示 将一个4行的表格 弄成2个2行的表格 并且当中要多出一行 那么快捷键如下 选中要断开的那一行 ctr shift enter即可断开
  • bootStrap-table实战详解与问题总结

    背景介绍 说实话 前端一直是我的薄弱项 每次新需求的最大难点就是前端技术的攻克 不仅仅是前端技术的框架繁多 菜也是原罪 这次的需求是在后台调用另外一个系统接口 将返回的数据通过表格的形式展示在页面上 要做一个表格 那选择可真的就太多了 前端
  • Unity与EasyAR

    Unity与EasyAR 从老师哪里接到了一个小项目 具体就是主一款具有AR功能的旅游应用 而AR方面的需求十分简单 就是识别图片 并显示出对应模型就行了 就跟EasyAR的Unity样例一个样子 所以这里就选择使用android跟unit
  • 关于Descriptors cannot not be created directly报错

    报错信息为 TypeError Descriptors cannot not be created directly If this call came from a pb2 py file your generated code is o
  • 在angular中使用ng-zorro-antd组件

    前言 网上关于angular引用ng zorro antd的文章太少了 而且还是7版本的angular 安装的过程踩了不少的坑 特此记录 1 安装ng zorro antd angular的初始化我就不赘述了 安装ng zorro antd
  • 【Linux】makefile学习笔记(网址)

    跟我一起写Makefile https seisman github io how to write makefile functions html 跟我一起写 Makefile 一 陈皓 https blog csdn net haoel
  • 【OpenAI】ChatGPT函数调用(Function Calling)实践

    6月13日OpenAI在Chat Completions API中添加了新的函数调用 Function Calling 能力 帮助开发者通过API方式实现类似于ChatGPT插件的数据交互能力 本文在作者上一篇文章 私有框架代码生成实践 的
  • VC++ 制作滤镜效果(底片效果、雕刻效果、黑白效果)

    转载请标明是引用于 http blog csdn net chenyujing1234 欢迎大家提出意见 一起讨论 需要源码的请单独与我联系 滤镜是一种改变图像相貌的程序 其本身并不属于图像处理研究的范畴 滤镜程序的核心算法源自数字图像处理
  • jdk版本切换工具jenv使用指南

    1 下载jenv包 下载链接 GitHub FelixSelter JEnv for Windows Change your current Java version with one line 下载JEnv zip 将JENV添加到环境变
  • Java当中判断学生成绩等级的方法

    前言 使用两种方式来判断学生成绩的等级 第一种 if else if else来判断 第二种 使用switch语句来判断 一 if else if else来判断 代码如下 示例 import java util Scanner 题目 使用
  • 前端视频插件Video.js的基本使用

    1 使用前准备 先移步官网对插件进行大致的了解 以判断是否满足需求的需要 官网中的demo相当实用 在下就是官网 2 正式开始 首先引入相关的文件 3 HTML代码部分 div class m div
  • IO多路复用机制——Select

    IO多路复用机制 Select 服务器端使用select机制监听可读的文件描述符 客户端 的一般流程如下 下面将说下 如何将select来实现多并发的双向通信 select函数族如下 服务器端使用select机制监听可读的文件描述符 客户端
  • Oracle数据库日志写进程执行的时机

    用户执行commit操作时 日志缓冲区三分之一满时 DBWn进程写入前 每隔三秒 数据库正常关闭前
  • MySQL学习笔记-基础实践篇-2.数据库的基本操作(DDL)

    文章目录 2 数据库的基本操作 DDL 总览 MySQL基础学习笔记思维导图 重难点问题总结 1 database基本操作 1 1 启动和连接数据库 1 2 增删改查database 2 table基本操作 2 1 增删改查table 2
  • 【场景方案】我所积累的一些跨页面的数据传递方式,持续更新,欢迎补充~

    文章目录 Iframe内嵌相互传递 window postMessage BroadcastChannel同标签页数据传递 localStorage中间人传递 localStorage监听 Service Worker Shared Wor
  • Linux系统编程-文件IO、标准库IO、刷新、缓冲模式

    原文 https www toutiao com i6963239107937960480 Linux系统编程的主要内容 就是分门别类的讲解Linux操作系统各个部分的原理 然后介绍或展示相关的系统调用API函数 这一部分的内容非常多 几乎
  • 【vue】better-scroll滚动不全

    项目场景 移动端content内容可以滚动 问题描述 部分组件滚动不全 原因分析 接口获取图片数据需要时间 而better scroll里的scrollHeight已经预先计算出可滚动高度 导致后面加载出来的图片无法滚动 解决方案 方法一