首先安装依赖插件
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()
},
好啦 完成啦~