上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言:
上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结。
一、在项目中使用 mint-ui 需要先安装
查看官网
(1)安装:npm i mint-ui --save
(2)在 vue 中 main.js 引入
import MintUi from 'mint-ui
import 'mint-ui/lib/style.css
全局使用:Vue.use(MintUi)
二、上拉加载更多展示
知乎视频www.zhihu.com
三、逻辑解析
1.上拉加载实际上是分页的一种体现,刚开始处于加载状态
2.如果数据加载成功需要判断数据是不是最后一页(可能只有一页数据)
(1)上拉加载是根据 page 的不断自增长,在调接口的时候获取新的数据的,如果加载出来的数据小于每页显示的数据,那么说明加载结束。需要通过 vue 数据双向绑定隐藏加载中字样
(2)如果加载完数据,还需要显示没有更多数据的提示
(3)使用 mint-ui 之
<ulv-infinite-scroll="getmovielist"infinite-scroll-disabled="loading"infinite-scroll-distance="40"></ul>
其中:
getmovielist
是一个方法,用于调用接口处理数据,默认会自动调用一次初始化展示;
loading
是个开关,用于在加载数据过程中防止用户不断触发上来触底再次加载;
40
表示距离底部小于 40 像素的位置再次触发数据加载。
3.如果在加载的过程中,用户继续上拉至底部触碰加载新的一页数据(上拉加载实际上是分页的一种体现)
4.脚手架 html 代码如下
<template><div class="movie_body"><ulv-infinite-scroll="getmovielist"infinite-scroll-disabled="loading"infinite-scroll-distance="40"><li v-for="item in movielist" :key="item._id"><div class="pic_show"><img :src="item.imgurl"></div><div class="info_list"><h2>{{item.title}}</h2><p>观众评 <span class="grade">{{item.ratings}}</span></p><p>主演: {{item.stars}}</p><p>{{item.description}}</p></div><div class="btn_mall">购票</div></li></ul><div class="commondiv loading" v-show="showloading">loading....</div><div class="commondiv" v-show="showmore">没有更多数据了...</div></div>
</template>
### 5 js代码如下
export default {data() {return {movielist: [],base_url:'http://localhost:8888/', //定义一个根目录,因为要访问图片需要根目录loading: false,page: 1, //page默认是1pagesize: 5, //每次分页的条数showloading: false, //控制加载loadingshowmore: false, // 控制有没有更多数据};},computed: {},watch: {},methods: {getmovielist(){ // 默认执行一次this.loading = true // 开关,数据没有出来之前不能连续请求同一参数的接口this.showloading = truevar start = (this.page-1) * this.pagesize // strat表示跳过几条var end = this.pagesize //查几条数据this.$http.get(`/movies?start=${start}&end=${end}`).then(res => {// console.log(res)this.showloading = false// 把所有的图片var list = res.list //赋值一个变量list.forEach((item)=>{item.imgurl = this.base_url+item.imgurl//同意处理图片前缀})// 如果赋值操作的话,那么每次上拉后请求过来的新数据会把前面的全部覆盖掉this.movielist = this.movielist.concat(list)//每次的数据都要添加进来而不是把之前的数据覆盖掉if(list.length < this.pagesize){//说明数据已经加载完毕this.loading = true//loading为false的话可以调用,为true的时候上拉的时候就停止请求了this.showmore = true} else { // 说明还有数据this.page = this.page+1 //这个时候page需要加1console.log(this.page)this.loading = false// 如果数据还有这个时候把loading放开}})}}
}
ps: axios 封装需要引入 axios
并在 main.js 中 Vue.prototype.$http = axios 挂载一下,本片作者使用了环境变量进行跨域代理配置,你也可以根据自己的调用接口进行相应处理.
【千锋web前端】Node.JS经典版教程入门到大神_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
【千锋教育】VUE全套教程从入门到精通_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
千锋_前端教程_ReactNative项目之美食App(2020首发)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
原文来自知乎:千锋HTML5学院
原文链接:如何用Vue + Mint UI实现上拉加载更多
上拉加载_如何用Vue + Mint UI实现上拉加载更多相关推荐
- 抖音上的python课程_如何用Python抓抖音上的小姐姐
爬虫的案例我们已讲得太多.不过几乎都是 网页爬虫 .即使有些手机才能访问的网站,我们也可以通过 Chrome 开发者工具 的 手机模拟 功能来访问,以便于分析请求并抓取.(比如 3分钟破译朋友圈测试小 ...
- ie加载项存在残留是什么_如何用百度杀毒清除IE浏览器加载项残余
如何用百度杀毒清除IE浏览器加载项残余?很久没有主动查杀毒了,清理了一下,突然发现IE浏览器有加载项残余,一探究竟. 方法/步骤 一般扫描到系统异常,都会仔细查看,寻根溯源,而不是随手清理了之,能自己 ...
- axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; imp ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- pyqt 获取 UI 中组件_一起学Vue:UI框架(elementui)
目标 使用Vue+ElementUI构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 安装elem ...
- 大文件分片上传前端框架_无插件实现大文件分片上传,断点续传
文件上传.gif 1. 简介: 本篇文章基于实际项目的开发,将介绍项目中关于大文件分片上传.文件验证.断点续传.手动重试上传等需求的使用场景及实现: 2. 项目需求 在一个音视频的添加中,既要有音视频 ...
- 下拉默认选择_在Excel中制作二级联动下拉菜单,太有用了
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
- ajax java 图片加载_如何用Ajax加载服务器的图片
用Ajax请求服务器的图片,并显示在浏览器中 前言 一直在数据库里面存的都是图片在服务器的地址,然后再到浏览器中显示,但是发现两个问题 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js ...
- 滑动加载怎么做 php,vue之UI框架如何实现滑动加载数据
在我们移动端还有一个很常用的组件,那就是滑动加载更多组件.平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现 ...
最新文章
- Android 读取xml转json,将XML转换为Android中的JSON对象
- mysql数据库基本操作练习
- T-SQL基础(三)之子查询与表表达式
- linux用户、用户组 增删改查专栏
- 什么!卷积要旋转180度?!
- 【英语学习】【WOTD】sequester 释义/词源/示例
- C# 中执行 msi 安装
- ubuntu 64 12.04 oracle,Ubuntu 12.04 (amd64)安装Oracle 11g 总结
- POJ1149 最大流(Isap)
- HTML(超文本标记语言)的内容和理解
- 关于IP地址块聚合的一些问题
- google的视频下载插件
- 算法设计与分析基础 第一章谜题
- BES(恒玄) 平台 复杂按键 实现
- 有关图像生成的函数 .
- python音乐下载_python 音乐下载演示源代码
- 蓝桥杯比赛准备总结(大学编程学习历程)
- 【源码】具有“放大镜”功能的函数magnify
- Ekho TTS网页改版,支持7种语言的在线demo
- nova8pro能升级鸿蒙吗,华为nova8pro可以升级鸿蒙系统吗-什么时候可以升级鸿蒙系统...