关于el-scrollbar滚动条初始化不显示的问题及解决

目录
  • el-scrollbar滚动条初始化不显示
  • el-scrollbar:Element UI隐藏组件
    • 滚动条初始化消失的问题
    • 问题分析

el-scrollbar滚动条初始化不显示

当使用el-scrollbar的时候，比如你的数据列表是后端获取的，这时候，初始化的时候，因为数据还没有获取到，导致里面的内容没有撑开，所以滚动条是不显示的，但是可以正常滚动,见下图

所以解决办法是在获取到列表的时候，调用一下update方法

查看源码的时候，因为scrollBar有一个update方法，所以调用这个方法可以解决

<el-scrollBar ref="scrollDiv"></el-scrollBar>
...
// 异步获取列表之后
this.nextTick(() => {
	//解决滚动条初始化消失的问题
	this.$refs.scrollDiv.update()
})

el-scrollbar:Element UI隐藏组件

滚动条初始化消失的问题

注意事项：

1.el-scrollbar的父层要有固定高度

2.el-scrollbar的高度要设成100%

3.如果出现横滚动条，添加overflow-x:hidden;

问题分析

通过阅读源码，scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

props: {
    native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条
    wrapStyle: {},  // 包裹层自定义样式
    wrapClass: {},  // 包裹层自定义样式类
    viewClass: {},  // 可滚动部分自定义样式类
    viewStyle: {},  // 可滚动部分自定义样式
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {  // 生成的标签类型，默认使用 `div`标签包裹
      type: String,
      default: 'div'
    }
}

代码示例

<el-scrollbar
    wrap-class="wraplist"
    ref="scrollDiv"
    wrap-style="overflow-x:hidden;"
    view-class="viewclass"
    view-style="font-weight: bold;height:100%;"
    :native="false"
>
</el-scrollbar> 
setTimeout(() => {
   this.$refs.scrollDiv.update()
 }, 0)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • elementUI中Table表格问题的解决方法

    elementUI中Table表格问题的解决方法

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. 在开发vue框架项目时,引入element插件,使用table表格组件时,遇到了一些问题,以下列出以供参考. 1.表格样式问题: 混乱样式.png 正常样式.png 如上图,在当前导航表格table样式是没问题的,但当我点击别的导航去到另外的页面,然后再回到之前的导航页面,表格table的样式就会混乱,随便点击当前页面或刷新亦或拉伸页面,样式又恢复正常,很奇怪的样式问题.

  • 详解element-ui 组件el-autocomplete使用踩坑记录

    详解element-ui 组件el-autocomplete使用踩坑记录

    项目遇到一个比较麻烦的需求,保存用户填写的历史记录,项目使用的element-ui,自然就使用了el-autocomplete组件,然后就是各种踩坑,以下记录以下写代码过程中遇到的问题 createFilter(queryString, filed) { console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break case 'cardPa

  • 关于Element-ui中Table表格无法显示的问题及解决

    关于Element-ui中Table表格无法显示的问题及解决

    目录 Element-ui中Table表格无法显示 1.准备工作 2.引用Element-ui官方文档中的Table表格代码 3.启动端口,并在浏览器访问 Element-ui表格不生效问题 原因是 Element-ui中Table表格无法显示 今天项目中需要用到表格,于是就采用了由饿了么前端团队开发的Element-ui + Vue组合. 1.准备工作 使用命令:cnpm i element-ui -S 进行安装Element-ui,安装好了之后,进行如下配置: 这样操作之后,就可以使用Ele

  • element的el-table中记录滚动条位置的示例代码

    场景重现:在项目中使用了keep-alive来缓存组件,且使用element中的table列表,但在项目中是对table进行了二次封装,跟页码合在了一起.按照网上的直接对scrollTop赋值,赋值失败了,还要加上setTimeout才能成功,虽然实现了功能,但是不知道原因,可以的话希望有人能解答. 废话少说,直接赋上代码. <template> <div class="table"> <el-table ref="table">

  • swiper Scrollbar滚动条组件详解

    swiper Scrollbar滚动条组件详解

    本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码,供大家参考,具体内容如下 1.scrollbar 为Swiper增加滚动条.类型:object. 2.el scrollbar容器的css选择器或HTML元素.类型:string/HTML Element,默认:.swiper-scrollbar. 3.hide 滚动条是否自动隐藏.类型:boolean,默认:true(会自动隐藏),false(不会自动隐藏). 4.draggable 设置为true时允许拖动滚动条.类型

  • Python中Tkinter Scrollbar滚动条(窗口滑动条)

    目录 简介 语法 参数 简介 滚动条小部件用于向下滚顶其他小部件的内容,如列表框,文本和画布,但是,我们也可以为Entry小部件创建水平滚动条,常常被用于实现文本,画布和列表框的滚动 可以配合Text组件,Canvas组,Listbox组件一起使用,水平滚动条还能跟Entry组件配合 语法 D = Scrollbar(top,options) 参数 activebackground 鼠标悬停在滑块和箭头上方时他们的颜色 bg 当鼠标不在滑块和箭头上方时,滑块和箭头的颜色 bd 围绕槽的整个周长的

  • vue css 引入asstes中的图片无法显示的四种解决方法

    这里主要针对的是vuecli2中的一些问题. vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets 关于这两者之间的区别,和如何选择这里就不多说了! 这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时将会遇到的一些问题! 正常情况,我们在本地开发调试的时候,无论什么样的方式引入图片都不会有问题.但是,一大包发布打线上,就会出现图片无法加载的情况! 这是因为,出于某些原因,有人修改了config目录下的i

  • android真机调试时无法显示logcat信息的解决方法介绍

    android真机调试时无法显示logcat信息的解决方法介绍: window-->show view-->android->devices, 打开devices,点击右边的截屏图片的按钮.等到出现截图的时候,logcat就出来信息了!

  • Yii使用ajax验证显示错误messagebox的解决方法

    本文实例讲述了Yii使用ajax验证显示错误messagebox的解决方法.分享给大家供大家参考.具体方法如下: yii 自带了ajax 表单验证 这个可能有些朋友不知道了,但我今天在使用yii 自带的ajax 表单验证 时碰到一些问题,下面我来整理例子与大家参考一下. 在Yii中,可以利用ajax执行一个action,但是这个action有时候会有弹出错误讯息的需求,这时候的处理方式如下 基本思想 利用exception,比如: 复制代码 代码如下: throw new CHttpExcept

  • PHP验证码无法显示的原因及解决办法

    PHP验证码无法显示的原因及解决办法 一.如果是utf-8,就有可能是BOM没有清除 二.在Header("Content-type: image/PNG"); 之前有输出 三.第一行PHP隐藏了代码,如空格,回车等. 解决代码: $image_width=70; //设置图像宽度 $image_height=18; //设置图像高度 $new_number=$_GET[num]; //$new_number=5; $num_image=imagecreate($image_width

  • js的.innerHTML = ""IE9下显示有错误的解决方法

    问题: 在用js动态创建html页面时: 复制代码 代码如下: var tab = document.createElement("table"); tab.innerHTML += "<td>订货单号</td>"+ "<td>单据日期</td>"+ "<td>商品类型</td>"+ "<td>订单属性</td>"

  • Android开发之APP安装后在桌面上不显示应用图标的解决方法

    本文实例讲述了Android开发之APP安装后在桌面上不显示应用图标的解决方法.分享给大家供大家参考,具体如下: 一.问题: 前几天在写项目的时候运行的时候突然Android桌面上没有了应用图标,但是应用里面下载的应用有.调试版本和发布正式的版本都没有,之前以为是因为用了不同的keystore发布了两个不同的正式版本造成的问题.后来在看别人的文章才知道是什么问题. 二.分析: 原因就是activity中的intent-filter用了不同的data和action属性.intent-filter必

  • ScrollView中嵌入ListView只显示一条的解决办法

    通常情况下我们不会在ScrollView中嵌套ListView,但是如果面试官非让我嵌套的话也是可以的. 在ScrollView添加一个ListView会导致listview控件显示不全,通常只会显示一条,究竟是什么原因呢? 两个控件的滚动事件冲突导致.所以需要通过listview中的item数量去计算listview的显示高度,从而使其完整展示,如下提供一个方法供大家参考. 解决办法如下所示: lv = (ListView) findViewById(R.id.lv); adapter = n

  • Android开发中调用系统相册上传图片到服务器OPPO等部分手机上出现短暂的显示桌面问题的解决方法

    要原因是主体样式设置的问题:这里把appTheme设置一个style即可: <item name="android:windowBackground">@color/white</item> <!--下面这个属性很重要,有时候会出现某些机型在调用系统相册的时候,短暂的出现手机桌面现象--> <item name="android:windowIsTranslucent">false</item> <i

随机推荐