vue mint-ui 框架下拉刷新上拉加载组件的使用
2023-09-11 14:19:37 时间
安装
npm i mint-ui -S
然后在main.js中引入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
下拉刷新上拉加载更多数据
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
<ul class="track-list">
<li class="track-item" v-for="(item,index) in list" :key="index">
哎哎哎
</li>
</ul>
</mt-loadmore>
- top-method绑定的是下拉刷新触发的方法
- bottom-method是上拉加载触发的方法
- bottom-all-loaded绑定的是否已加载完全部数据 ,默认为false,如果全部加载完数据之后,将allLoaded设置为true,这样就不会再去触发上拉加载的方法了
this.allLoaded = true;
全部代码
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
<ul class="track-list" v-if="list.length!==0">
<li class="track-item" v-for="(item,index) in list" :key="index">
<div class="location"><span class="iconfont icon-location"></span>{{item.address}}附近</div>
<div class="time"><span class="iconfont icon-time"></span>{{item.dateCreated}}</div>
</li>
</ul>
<div class="no-data" v-else>暂无孩子轨迹位置信息</div>
</mt-loadmore>
// 下拉刷新
loadTop(){
this.curPage = 1
this.getChildLocationList()
},
// 加载更多数据
loadBottom(){
this.curPage +=1
this.getChildLocationList()
},
getChildLocationList(){
this.allLoaded = false
let dateCreated = this.dateCreated
this.$api.childLocationList({
params:{
id:this.uid,
cid:this.curChildId,
dateCreated:dateCreated,
isPager:1,//0-不分页,1-分页;
pageNum:this.curPage,//第几页
pageSize:this.pageSize//每页显示数据条数
}
}).then(res=>{
if(res.code==2000){
if(res.row){
let _list = res.row.list
this.curPage = res.row.pageNum
this.pageSize = res.row.pageSize
let totalPages = res.row.pages//总页数
// 下拉刷新 加载更多
setTimeout(() => {
this.$refs.loadmore.onTopLoaded();
this.$refs.loadmore.onBottomLoaded();
}, 1000);
if(this.curPage==1){
this.list = _list;
}else{
if(this.curPage==totalPages){
this.allLoaded = true;// 若数据已全部获取完毕
}
this.list = this.list.concat(_list);//数组追加
}
}else{
this.$refs.loadmore.onTopLoaded();
this.allLoaded = true;// 若数据已全部获取完毕
this.list = []
}
}else{
this.$refs.loadmore.onTopLoaded();
}
})
},
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- [转] vue自定义组件中的v-model简单解释
- 28 Vue组件中的单项数据流机制
- vue Iframe
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- vue 试图改变子组件props 属性值时,控制台报错解决方案
- vue 父组件与子组件的三生三世
- vue-devtools 获取到 vuex store 和 Vue 实例的?
- Vue组件间的通信【子传父,父传子,同级传递,爷孙传递】
- React和Vue组件间数据传递demo
- 《WEB安全渗透测试》(19)Vue.js中的XSS攻击
- vue常用
- Vue keep-alive 详细介绍(动态组件、路由组件缓存优化)
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
- 02-vue基础-Vue常用特性
- Vue--this.$refs 获取dom元素和组件(获取子组件的dom和方法)
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue vuepress 解决npm安装依赖和package.json版本不一致
- Django REST framework+Vue 打造生鲜超市(十一)
- vue router拦截器的简单使用
- Vue上传图片预览组件
- Vue-cli 4在vue.config.js中配置别名
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- 怎么在Vue中使用axios组件
- vue component动态组件