vuescroll-基于vue的内容滚动条

小鱼儿心语：再遥远的目标，也经不起执着的坚持，加油！^ w ^

一、用npm安装

npm install vuescroll -S

二、在main.js中引入

import vuescroll from 'vuescroll';
Vue.use(vuescroll);

三、页面中的使用

//  页面展示部分
<div class="Gis_middle display_flex">
      <div class="content" :style="videos">
        <p class="title">
          <img src="@/assets/img/icon3.png" />
          <span>缩略图</span>
        </p>

        <ul>
          <vue-scroll :ops="ops">  ------------------------------------------------需要超出滚动的内容外包vue-scroll标签即可
            <li v-for="(item, index) in videoData" :key="index">
              <div class="videoInfo">
                <div>
                  <!-- 播放m3u8视频 -->
                  <video-player class="video-player vjs-custom-skin" :playsinline="true" :options="item.videoname | videoOption"> </video-player>
                </div>
                <p>{{ item.videoname }}</p>
              </div>
            </li>
          </vue-scroll>
        </ul>
      </div>
    </div>

//  js部分
data() {
    return {
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true,
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: '#F5F5F5', //滚动条颜色
          opacity: 0.5, //滚动条透明度
          'overflow-x': 'hidden',
        },
        videoData: [],
      },
    }
  },

vue 监听scroll事件无效

1、 监听的dom元素设定高度，子元素的内容要超过容器的高度
2、 设定overflow为:auto/scroll，默认值为visible，无法触发

以上就是滚动完整的使用过程，页面效果如下：

内容滚动.png

希望可以帮助大家更好的代码编写，有什么及时沟通给我留言哦~