目录

 

介绍

下载

引入

使用

 

配置项

事件

refresh/load

---

介绍

---

Vuescroll 一个功能强大，有多种模式的基于Vue.js的滚动条插件，它的原理是创建 div 用于包裹要滚动的内容，操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。

设计它的目的是用来美化和增强你的滚动条。

你可以通过更改配置来选择不同的模式:

• native 模式: 类似于原生的滚动条，但是可以自定义滚动条样式，使用于 PC 端用户。
• slide 模式: 允许你用手指或鼠标滑动内容， 可以滑动超出边界范围，适用于移动端端用户。

你也可以通过更改配置滚动条的样式，包括：

• 透明度
• 高度/宽度
• 位置
• 背景色
• 是否保持显示

 

下载

---

npm install vuescroll -S

引入

import vueScroll from 'vuescroll'

 

使用

 

 //template
<div class="contnet">
    <vue-scroll :ops="ops">
       <ul class="el_home">
          <li v-for=" (item,index) in 30" :key="index">
            <div>
               <span>-----</span>
               <span class="num">{{item}}</span>
               <span>-----</span>
            </div>
          </li>
       </ul>
    </vue-scroll>
</div>

 

//script
<script>
    import vueScroll from "vuescroll";
    import "vuescroll/dist/vuescroll.css";
    export default {
        name: "vueScrollpage",
        components: {
            vueScroll
        },
        data() {
            return {
                ops: {// 在这里设置配置
                    vuescroll: {},
                    scrollPanel: {},
                    rail:{},
                    bar:{}
                }
            }
        },
        methods:{
        
        }
        
    }

//CSS
<style scoped>
.content {
  width: 100%;
  height:500px;//固定值
  ...
}
ul,li {
  list-style: none;
}
.el_home {
  width: 100%;
  height: 100%;
}

</style>

 

 

配置项

---

• Vuescroll 的配置项由 5 部分组成, 它们分别是

1. vuescroll, 

2. scrollPanel, 

3. bar, 

4. rail, 

5. scrollButton.

• vuescroll

mode

    类型: native|slide

    默认值: native

    选择一个模式, native 或者 slide

 

sizeStrategy

    类型: number|percent

    默认值: percent

    如果父容器不是固定高度，请设置为 number , 否则保持默认的percent即可。

detectResize

    类型: boolean

    默认值: true

    是否检测内容尺寸发生变化。

• 刷新和加载

1. vuescroll.mode选择slide模式
2. vuescroll里配置

pullRefresh: {
    enable: true,
    tips: {
        deactive: "下拉刷新",
        active: "释放刷新",
        start: "正在刷新...",
        beforeDeactive: "加载完成!"
    }
},
pushLoad: {
    enable: true,
    tips: {
        deactive: "上拉加载",
        active: "释放加载",
        start: "正在加载...",
        beforeDeactive: "加载完成!"
    },
    auto: false, //自动加载
    autoLoadDistance: 0 //加载距离
}

事件

---

refresh/load

介绍

对应下拉刷新的每个阶段. 从开始到结束分别是 ：

refresh-activate>>>refresh-start>>>refresh-before-deactivate>>>refresh-deactivate

事件详情

refresh-activate, refresh-deactivate

参数	描述
vm, refreshDom	vm 是当前 vuescroll 实例, refreshDom 是提示的那个 dom。

refresh-start

参数	描述
vm, refreshDom, done	vm 是当前 vuescroll 实例, refreshDom 是提示的那个 dom。done 是完成函数, 这个阶段你适合去抓取数据, 然后调用 done() 并且进入下一个阶段。

refresh-before-deactivate

参数	描述
vm, refreshDom, done	vm 是当前 vuescroll 实例, refreshDom 是提示的那个 dom。done 是完成函数, 这个阶段你适合去给出提示(比如加载成功！或加载失败！), 然后调用 done() 并且进入下一个阶段。

 

<vue-scroll
  @refresh-activate="handleActivate"
  @refresh-start="handleStart"
  @refresh-before-deactivate="handleBeforeDeactivate"
  @refresh-deactivate="handleDeactivate">
</vue-scroll>

    // ...
    {
        methods: {
            handleActivate(vm, refreshDom) {
                console.log(vm, refreshDom, 'handleActivate');
            },
            handleStart(vm, refreshDom, done) {
                console.log(vm, refreshDom, 'handleStart');
                seTimeout(() => {
                    done(); // load finished
                }, 2000)
            },
            handleBeforeDeactivate(vm, refreshDom, done) {
                console.log(vm, refreshDom, 'handleBeforeDeactivate');
                done();
            },
            handleDeactivate(vm, refreshDom) {
                console.log(vm, refreshDom, 'handleDeactivate');
            }
        }
    }

Load 是一样的，换汤不换药。套用就行