vue修改表格滚动条样式（Vuescroll - 一个基于Vue的虚拟滚动条）

本文目录

• Vuescroll - 一个基于Vue的虚拟滚动条
• 使用vue实现一个类似input range的滑动条
• 原生table表格出滚动条之后样式错乱
• 调整tree-select组件高度及横向滚动条
• vue使用时固定列导致滑动条问题
• elementui表格宽度超出滚动

Vuescroll - 一个基于Vue的虚拟滚动条

推荐一个基于Vue的滚动条-Vuescroll

GitHub地址： vuescroll

以前接触过一个后端管理系统， 叫H+， 偶尔发现它用的是左侧菜单没有滚动条， 于是， 我仔细查看dom， 发现H+ 左侧菜单的旁边有一个小的DIV， 我拖动的， 菜单竟然也能滚动， 我明白了， 这是用的虚拟滚动条， 我感觉这个挺不错的， 后来查看这个虚拟滚动条的源码， 发现是一个款叫做SlimScroll的基于jquery的库。由于我对Vue比较熟悉，所以，我想用Vue做一个类似的。

一开始用slimScroll的方法并不理想， slimscroll的滚动内容的方法是：

这有个2致命的缺点：

这两点带来了极差的UI体验！

后来， 我无意中发现了element-ui也是使用了虚拟滚动条， 并且效果很好， 尤其是在手机端滑动， 每次滑动结束手离开屏幕都能继续滑行一段距离， 比slimscroll效果要好，于是我就去element-ui的github上翻scrollbar的源码， 通过阅读源码， 我发现element-ui触发滚动的时机是在onscroll的时候， 也就是说， 把滚动内容的父元素设置为 overflow:scroll ， 然后监听父元素的onScroll事件， 在onScroll事件的callback里面移动滚动内容即可。 经过我的一番改进， 终于能做到和element-ui滚动条滚动的一个效果了。

后来，我又接触到了几个不错的， 并把它们的特点加进来了。 如element-resize-detector, scroller, smooth-scroll， bertter-scroll等等。 现在的Vuescroll已经升级为一个功能强大的滚动条了。

它的基本特点有：

总的来说，Vuescroll不仅仅只一个滚动条， 你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。

部分参考资料

使用vue实现一个类似input range的滑动条

问题描述：vue 路由页面之间如何用手指进行滑动
解决方法：
1、下载依赖：npm intall vue-touch --save -D
2、在需要滑动的页面添加标签;《v-touch》 注意要宽高，当页面有东西要写入时，可用v-touch 包裹着其他标签；
如：《v-touch class="controller" v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight"》
3、methods 中分别写入它们的方法；
onSwipeLeft（）{。。。。。。。}，
onSwipeRight（）{。。。。。。。}
以上这篇vue 路由页面之间实现用手指进行滑动的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:使用Vue-Router 2实现路由功能实例详解vue-router路由与页面间导航实例解析

原生table表格出滚动条之后样式错乱

原生table表格出滚动条之后样式错乱是由于设置了滚动条样式。设置的滚动条样式横向和纵向大小不一致会导致出滚动条之后样式错乱，将滚动条横向的height和纵向的width设置成一样大小就行了。

调整tree-select组件高度及横向滚动条

1.调整的高度根据input组件sieze=’mini’来的，不全适配，按需调整

给与 class="set-treeselect"
 《treeselect

                                v-if="b.inputType == 7"

                                :disable-branch-nodes="true"

                                multiple

                                size="mini"

                                class="set-treeselect"

                                v-model="b.rightOperand"

                                :options="treeList"

                                :normalizer="normalizer"

                                :show-count="true"

                                placeholder="请选择资质"

                                :limit="1"

                                :limitText="count =》 `+${count}`"

                                :clearable="false"

                                :disabled="pageType == ’detail’"

                              /》
以下是样式：
// 调整treeselect高度和横向滚动条

.set-treeselect {

  width: 240px;

  display: inline-block;

  position: relative;

  top: 10px;

  height: 32px;

}

::v-deep {

  .vue-treeselect__menu {

    overflow-x: auto !important;

    width: 250px;

    max-height: 180px !important;

  }

  .vue-treeselect__label {

    overflow: unset;

    text-overflow: unset;

  }

  .vue-treeselect__control {

    height: 20px !important;

  }

  .vue-treeselect__multi-value-item-container,

  .vue-treeselect--has-value .vue-treeselect__multi-value {

    height: 30px;

    line-height: 24px;

    padding: 0;

  }

  .vue-treeselect__limit-tip,

  .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value

    .vue-treeselect__input-container {

    padding-top: 0;

  }

  .vue-treeselect--has-value .vue-treeselect__multi-value {

    // margin-bottom: 15px;

  }

  .vue-treeselect__placeholder,

  .vue-treeselect__single-value {

    height: 28px;

    line-height: 32px;

    font-size: small;

    color: "#CCCFD6";

    // margin-top: 8px;

  }

  .vue-treeselect--has-value .vue-treeselect__input {

    height: 18px !important;

    line-height: 18px !important;

  }

  .vue-treeselect div,

  .vue-treeselect span {

    box-sizing: content-box;

    // white-space: nowrap;

    // text-overflow: ellipsis;

  }

  // 选中后的溢出隐藏

  .vue-treeselect__multi-value-label {

    display: block;

    width: 140px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

  }

  .vue-treeselect__value-container {

    display: block;

    height: 32px;

  }

}

效果如下：

vue使用时固定列导致滑动条问题

问题：当使用表格组件时使用固定列记录数据，在滚动条拉到固定列下方时滚动条变为不可被拉动的状态

解决：

原理：单独设置了固定列的高度，使固定列不覆盖下凡滚动条，使其在任何情况下都可以被拉动，bottom属性可根据实际情况修改，设置为刚好在滚动条上方

***隐藏网址***

elementui表格宽度超出滚动

你想问的是elementui表格宽度超出滚动要怎么操作？操作步骤如下：
1、在“el-table”标签上添加 “style”属性，设置表格宽度和滚动条样式。
2、给表格的每一列设置“width”属性，表示该列的宽度。如果表格中有一列的宽度不指定，则该列的宽度会自适应剩余空白区域，可能会造成表格宽度超出的情况。
3、如果表格中的内容较多，需要分页显示，则需要给表格添加“pagination”属性，并指定相应的参数。
4、通过上述操作，可以设置elementui表格的宽度超出时出现滚动条的效果，并且实现分页显示功能。