flask加vue 动画 加载更多

16 篇文章 0 订阅

曾经使用flask_paginate(地址:详解使用flask_paginate进行分页_我就是我,不一样的烟火的博客-CSDN博客_flask_paginate)进行分页,现在又想新的想法,怎么才能和其它大多数主流网站一样,通过点击加载更多,获取到更多的页面呢?

 

源码地址: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 

个人网站演示演示地址:断桩处理,水磨钻施工电话,全国断桩处理_重庆固基路桥工程有限公司

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值