flask加vue 动画 加载更多
曾经使用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 动画 加载更多的更多相关文章
- 【转载】Vue自定义指令实现pc端加载更多
转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 【Vue.js】加载更多—vue-infinite-scroll
引言 今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做vue-infinite-scroll 我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法,官网上面 ...
- 使用vue之directive设计列表加载更多
背景 之前写过一篇<纯JS实现加载更多(VUE框架)>,它的逻辑思路比较清晰易懂,而今天看了一天公司项目的部分功能代码,发现同事们写的加载更多的功能更加的有趣,而且易于封装到一个组件当中, ...
- Vue——轻松实现vue底部点击加载更多
前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...
- vue+better-scroll 下拉刷新,上拉加载更多
better-scroll 来做下拉刷新和 上拉加载 特别方便. 安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...
- vue移动端上拉加载更多
LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...
- vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
随机推荐
- 修改oracle用户密码为永不过期
错误提示:ORA-28001: the password has expired (DBD ERROR: OCISessionBegin) 解决方法:修改密码为永不过期 (1)查看用户的proifle ...
- dijkstra算法(贪心算法)——解决最短路径问题
最短路径 给定一张带权图和其中的一个点(作为源点),求源点到其余顶点的最短路径 基本思想 1)源点u,所有顶点的集合V,集合S(S中存有的顶点,他们到源点的最短路径已经确定,源点u默认在S中),集合V ...
- 关于xftp上传文件状态错误的解决
新建一个文件夹,/usr/local/wwj 更改wwj权限 chmod 777 wwj 然后就可以上传了 如果还不行,就关闭防火墙
- 学以致用十一-----centos7.2+python3+YouCompleteMe走过的坑
目的,安装YouCompleteMe 插件 参考的资料 https://blog.csdn.net/zs376957686/article/details/77833953 https://www.c ...
- SQL编写-谁和谁是好朋友
problem: 用户表 姓名 张三 李四 王五 好友表 姓名 好友姓名 张三 李四 张三 王五 李四 张三 用户表里面姓名必须在好友表里面互加为好友,请问如何找出还没有加为好友的姓名 ...
- 鼠标经过,显示悬浮DIV
属牛人的本命佛是虚空藏菩萨.属牛人可佩戴属牛黄玉本命佛来提升财运,黄玉的金黄色代表蒸蒸日上,而“金黄”也就是“黄金”的到(倒)来,象征着富贵与财气,佩戴可以招财招富贵,同时黄玉亦是希望之石,可带来智慧 ...
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记十二之铭文升级版
铭文一级: ======Pull方式整合 Flume Agent的编写: flume_pull_streaming.conf simple-agent.sources = netcat-sources ...
- 20155205 2016-2017-2 《Java程序设计》第1周学习总结
20155205 2016-2017-2 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 下载了娄老师推介的xmind,试着自己总结了一下. 为了要运行Java程序,必须安装 ...
- gcc和vs在c的一些区别
1.switch中每个标签后面的命令在gcc中需要{}括起来以指明作用域. 2._itoa是非标准的c和c++扩展函数,在linux下可以使用sprintf(string, "%d &q ...
- java如何编写下载功能
@RequestMapping("/downLoadFailRecord") public ModelAndView downLoadFailRecord( HttpServlet ...