vuescroll-基于vue的内容滚动条

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

一、用npm安装

npm install vuescroll -S

二、在main.js中引入

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

三、页面中的使用

//  页面展示部分

      

        

          
          缩略图
        

        

            ------------------------------------------------需要超出滚动的内容外包vue-scroll标签即可
            

              

                

                  
                   
                
                
{{ item.videoname }}
              
            
          
        
      
    

//  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

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