vue 无限滚动问题

来源:http://www.chinese-glasses.com 作者:Web前端 人气:92 发布时间:2020-04-22
摘要:infiniteScroll是2.9.0版本新增的特性,旧的项目需要升级element版本(注意升级可能导致其他页面的无措,谨慎升级) https://github.com/ElemeFE/vue-infinite-scroll/ 步骤 1.loadMore是方法,里面是要执

infiniteScroll是2.9.0版本新增的特性,旧的项目需要升级element版本(注意升级可能导致其他页面的无措,谨慎升级)

https://github.com/ElemeFE/vue-infinite-scroll/

步骤

1.loadMore是方法,里面是要执行的代码

div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" div v-for="item in data" :key="item.index"{{item.name}}/div/div

data () { return { count: 0, data: [], busy: false } }methods: { loadMore: function() { this.busy = true setTimeout(() = { for (var i = 0, j = 10; i  j; i++) { this.data.push({name: this.count++ }) } console.log(this.data) this.busy = false }, 1000) } }

vue-infinite-scroll插件可以无限滚动实现加载更多,其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。

template ul v-infinite-scroll="load"  li v-for="i in count" {{ i }}/li /ul/templatescript export default { data () { return { count: 0 } }, methods: { load () { this.count += 2 } } }/script

总结

参数解释

import vueiInfinite from 'vue-infinite-scroll'Vue.use 加载中...

1 element-ui的infiniteScroll无限滚动(适合vue2,vue3)

npm i vue-infinite-scroll --save

时间: 2019-09-20阅读: 280标签: 滚动

main.js使用

效果默认会载入10行数据,只要往下滚动到页面底部,就会在1秒后再次加载10条,然后继续滚动,又会加载10条,实际情况到一定程度停止刷新

https://www.npmjs.com/package/vue-infinite-scroll

infinite-scroll-immediate-check 默认值为true,该指令意思是,应该在绑定后立即检查busy的值和是否滚动到底。如果你的初始内容高度不够高、不足以填满可滚动的容器的话,你应设为true,这样会立即执行一次loadMore,会帮你填充一些初始内容。

loadMore () { this.busy = true //把busy置位true,这次请求结束前不再执行 setTimeout => { this.page++ this.getGoodLists //调用获取数据接口,并且传入一个true,让axios方法指导是否需要拼接数组。 }, 500) }getGoodLists  { var param = { page: this.page, pageSize: this.pageSize, sort: this.sortFlag ? 1 : -1 } axios.get('/goods', {params: param}).then => { let res = response.data if  { this.goodList = this.goodList.concat //如果是flagtrue,则拼接数组。 if (res.result.count === 0) { this.busy = true } else { this.busy = false } } else { this.goodList = res.result.list this.busy = false 第一次进来的时候,把busy置位false。执行loadMore的方法 } }) },

链接:#/zh-CN/component/infiniteScroll

以上所述是小编给大家介绍的使用vue-infinite-scroll实现无限滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

10bet,infinite-scroll-listen-for-event 当事件在Vue实例中发出时,无限滚动将再次检查。

3.10表示距离底部为10 的时候就执行loadMore方法

代码

2.busy的值是true的时候,就不再加载,如果是false就执行加载

本文由10bet发布于Web前端,转载请注明出处:vue 无限滚动问题

关键词:

最火资讯