加载更多---vue

可直接拿来用

<template><div class="container"><div class="list"><ulclass="list"v-infinite-scroll="load"infinite-scroll-disabled="disabled"><liv-for="(i, index) in countData":key="index"class="list-item">{{ i }}</li></ul></div><p v-if="loading && isFlag" @click="more" class="btn">查看更多<van-icon name="arrow-down" /></p><p v-if="noMore && isFlag" class="btn">没有更多了</p></div>
</template><script>
export default {data() {return {count: ["北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏",], // 数据列表cou: 4, //默认显示条数loading: false,isFlag: false,num: 4, //每次加载显示条数};},computed: {noMore() {// 判断加载条数是否大于列表数据长度return this.cou > this.count.length;},disabled() {// 加载完成return this.loading || this.noMore;},countData() {// 计算属性使用切片生成新数组let data = [];// 大于默认显示条数，使用切片slice，返回新数组if (this.count.length > this.cou) {data = this.count.slice(0, this.cou);return data;} else {// 否则使用原来数组，不进行切片处理data = this.count;return data;}},},mounted() {// 判断是否显示加载更多/没有更多了if (this.cou > this.count.length) {this.isFlag = false;} else {this.isFlag = true;}},methods: {load() {this.loading = true;},more() {// 每次点击加三条this.cou += this.num;this.loading = false;},},
};
</script>
<style scoped>
.container {width: 100%;text-align: center;overflow: auto;
}
.container .list {color: pink;margin-bottom: 0.3rem;margin-top: 3rem;
}
.btn {margin: 0 auto;font-size: 0.36rem;font-family: PingFang;font-weight: 500;color: #999999;
}
</style>

知识点解析：

1、使用infinite-scroll-disabled在vue中下拉加载数据

2、Vue的vue-infinite-scroll插件----无限加载

v-infinite-scroll="load" 表示回调函数是load()
infinite-scroll-disabled="disabled" 表示由变量disabled决定是否执行load()，false则执行load()，true则不执行。(具体见1)

加载更多---vue相关推荐

vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
vue模拟加载更多功能（数据追加）
使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该 ...
笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 1 data() { 2 return { 3 lo ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
前端vue里面点击加载更多_vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
php底部加载更多,关于vue底部加载更多的代码
本文通过实例代码给大家介绍了vue底部加载更多,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下要实现的效果如下: {{showDay(index)}} {{item.title ...
vue监听滚动到底部加载更多
整理之前做过的一个vue滚动到底部的加载显示更多功能,后台已经分好了页就剩前端渲染主要参数pageSize 每页数量(这里默认10) pageNum 页数,能用代码说的就不吹泡泡了直接上代码: 一. ...

加载更多---vue

1、使用infinite-scroll-disabled在vue中下拉加载数据

2、Vue的vue-infinite-scroll插件----无限加载

相关网站：

加载更多---vue相关推荐

最新文章

热门文章