vue下拉加载交互

首先安装依赖插件

npm i -s vuescroll

然后引用

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

date里边添加配置

const ops = {
vuescroll: {
mode: 'slide',
pullRefresh: {
enable: false
},
pushLoad: {
enable: true,
auto: false, //是否自动触发加载
autoLoadDistance: 10,
tips :{
deactive:'Pull_load',
active:'Release_load',
start:'loading',
beforeDeactive:'Load_success'
}
}
},
scrollPanel: {
scrollingX: false,
}
}

然后data return下ops 

return {
ops,
}

页面开始渲染啦

<vue-scroll
:ops="ops"
@load-start="handleLoadStart"
@load-before-deactivate="handleLBD">
<div v-if="count.length < 1">{{itext}}</div>
<div v-for="i in count">
<span class="tx-1">{{ i.cash_time }}</span>
<span class="tx-2">{{ i.cash }}</span>
<span class="tx-3">{{ i.account_id }}</span>
</div>
</vue-scroll>

然后配置下拉

//记录上拉加载
handleLoadStart(vm, dom, done) {

//这里写接口以及铺数据
done()
})
},
handleLBD(vm, loadDom, done) {
//console.log('上啦结束了')
done()
},

好啦  完成啦~