曾经使用flask_paginate(地址:https://blog.csdn.net/qq_42239520/article/details/80378095)进行分页,现在又想新的想法,怎么才能和其它大多数主流网站一样,通过点击加载更多,获取到更多的页面呢?

源码地址:https://github.com/1417766861/flask_vue

首先给大家看一下,我最近用flask-vue完成加载更多的效果吧,点击加载更多后,获取更多帖子:

让我们从头开始吧。

首先我新建了一个flask_vue数据库,其中建立了一个article表,代码如下:

和之前flask_paginate操作 一样,首先创建数据库,插入足够多的帖子,这里就不多写了,附代码

其次,添加足够多的数据

主程序代码:

访问:

flask_vue想法,第一次进入主页,通过ajax请求,获取前面十条帖子,每当点击加载更多,获取新的10条,追加到旧帖子下面

这里有一个重点是:当我们第二次获取能内容的时候,就是执行loadmore函数的时候。

异步请求数据,当我们不加  async: false,点击两次加载更多才能追加新的数据

因为:但loadmore函数的ajax获取时,下面的for循环已经执行了,for循环的more_posts 为我定义的全局变量的值,此时为空

所以,async: false->当我ajax执行完,才执行后面的语句

效果:

源码地址:https://github.com/1417766861/flask_vue

个人网站演示演示地址:http://www.donghao.club/

flask加vue 动画 加载更多的更多相关文章

  1. 【转载】Vue自定义指令实现pc端加载更多

    转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...

  2. vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

    一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...

  3. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  4. 【Vue.js】加载更多—vue-infinite-scroll

    引言 今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做vue-infinite-scroll 我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法,官网上面 ...

  5. 使用vue之directive设计列表加载更多

    背景 之前写过一篇<纯JS实现加载更多(VUE框架)>,它的逻辑思路比较清晰易懂,而今天看了一天公司项目的部分功能代码,发现同事们写的加载更多的功能更加的有趣,而且易于封装到一个组件当中, ...

  6. Vue——轻松实现vue底部点击加载更多

    前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...

  7. vue+better-scroll 下拉刷新,上拉加载更多

    better-scroll 来做下拉刷新和 上拉加载 特别方便.  安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...

  8. vue移动端上拉加载更多

    LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...

  9. vue 原生添加滚动加载更多

    vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...

随机推荐

  1. GreenPlum 初始化配置报错:gpadmin-[ERROR]:-[Errno 12] Cannot allocate memory

    报错原因:可能swap太小或者没有交换分区 解决方法: (1)查看swap:swapon -s (2)如果什么都没有显示,说明你没有任何可用的swap,此时你可以添加1GB的swap: dd if=/ ...

  2. 谈谈thinkphp5.1中容器(Container)和门面(Facade)的实现

    tp5.1中引入了容器(Container)和门面(Facade)这两个新的类 官方文档已经给出了定义: 容器(Container)实现类的统一管理,确保对象实例的唯一性. 门面(Facade)为容器 ...

  3. shell常见命令

    awk awk是个很好用的东西,大量使用在linux系统分析的结果展示处理上.并且可以使用管道, input | awk ''  | output 1.首先要知道形式 awk 'command' fi ...

  4. jq页面加载分割截图

    <script> $(document).ready(function() { if (!Array.prototype.forEach) { Array.prototype.forEac ...

  5. 第13章:MongoDB-聚合操作--初体验

    ①MongoDB 的聚合功能 MongoDB 的聚合功能,聚合操作主要用于对数据的批量处理,往往将记录按条件分组以后,然后再进行一系列操作,例如,求最大值.最小值.平均值,求和等操作. 聚合操作还能够 ...

  6. CodeForces 235E Number Challenge (莫比乌斯反演)

    题意:求,其中d(x) 表示 x 的约数个数. 析:其实是一个公式题,要知道一个结论 知道这个结论就好办了. 然后就可以解决这个问题了,优化就是记忆化gcd. 代码如下: #pragma commen ...

  7. i2c_client的生成

    网上很多文档都是介绍源码,包括i2c_client结构体的源码都有贴出,看上去似乎需要手动写该结构体,但实际上,i2c_client的生成是用如下方法. \arch\arm\mach-omap2/bo ...

  8. 学以致用六---Centos7.2+python3.6.2+django2.1.1 --搭建一个网站

    目的,创建django project,开始django web之旅 一.创建一个project    在opt目录下创建一个project [root@gxc opt]# django-amdin. ...

  9. AngularJS实战之ng-repeat的详细用法

    一.基本语法 {{$index}}:获取元素的下标. {{$first}}:判断当前元素是否是第一个元素,是则为true,否则:false: {{$last}}:判断当前元素是否是最后一个元素,是则为 ...

  10. 20155205 2016-2017-2《Java程序设计》课程总结

    20155205 2016-2017-2<Java程序设计>课程总结 目录 一.每周作业链接汇总 二.实验报告链接汇总 三.博客中的经验与收获 - 自认为写得最好一篇博客是?为什么? - ...