vue和mint-ui loadMore 实现上拉加载和下拉刷新
首先安装mint-ui组件库
npm install mint-ui
在main.js中引入mint-ui和样式
import 'mint-ui/lib/style.css'
import MintUi from 'mint-ui'
Vue.use(MintUi)
然后在组件中引入lodeMore
import {Loadmore} from 'mint-ui'
在template模板中写法如下:
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false" :bottomDistance='bottomDistance'>
<ul>
<li v-for="(item,index) in list" v-bind:key="index">
<span class="user">{{item.sum}}<b>(总计奖励)</b></span>
<span class="time">{{item.time | formatDate}}</span>
</li>
</ul>
</mt-loadmore>
js代码如下:
data(){
return{
pagesize:1,//分页
pageval:5, //每次请求的个数
allLoaded:false,//是否加载完毕
haveMore: true, //是否有更多数据
}
},
created(){
this.loaddata();
},
methods:{
loadBottom: function(){//上拉加载更多
this.more();
this.$refs.loadmore.onBottomLoaded();
},
loadTop: function(){//下拉刷新
this.pagesize =1;
this.loaddata();
this.$refs.loadmore.onTopLoaded();
},
more() {
// 分页查询
this.pagesize ++;
this.loaddata()
this.isHaveMore(this.haveMore)
},
loaddata(){//加载数据从vuex中拿数据
this.$store.dispatch('managementAwardListDetail/getmanagerlistDetail',[this.timer,this.pagesize]).then(()=>{
if(this.$store.state.managementAwardListDetail.code == 200){
if(this.pagesize == 1){
this.list = this.$store.state.managementAwardListDetail.list;
}
else{
this.list = this.list.concat(this.$store.state.managementAwardListDetail.list);
if(this.$store.state.managementAwardListDetail.list.length == this.pageval){
this.haveMore = true;
}else{
this.haveMore = false;
}
}
}else{
this.$toast({
message:this.$store.state.managementAwardListDetail.msg,
});
}
}).catch((e)=> {
console.log(e);
})
},
isHaveMore: function () {
// 是否还有下一页,如果没有就禁止上拉刷新
this.allLoaded = true // true是禁止上拉加载
if (this.haveMore) {
this.allLoaded = false
}
}
},
css部分省略了,这样就大功告成了! 初学前端,大神请轻喷!
vue和mint-ui loadMore 实现上拉加载和下拉刷新的更多相关文章
- Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题
所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
- vue项目中上拉加载和下拉刷新页面的实现
功能:上拉加载,下拉刷新 使用方法: 自己创建一个.vue的文件(我自己是创建了一个PullToRefresh.vue的文件),将代码粘贴进去,具体的样式问题自己在该文件中调整. <templa ...
- 移动端上拉加载,下拉刷新效果Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等 ...
- 全网最easy的better-scroll实现上拉加载和下拉刷新
前言 移动端页面常见的一种效果:下拉刷新(pulldownrefresh)和上拉加载(pullupload),目的都是为了增强用户的体验效果,因此各种移动端滑动插件也是层出不穷,今天小编也在这里给大家 ...
- react antd上拉加载与下拉刷新与虚拟列表使用
创建项目 create-react-app antdReact 安装:antd-mobile.react-virtualized npm i antd-mobile -S npm i react-vi ...
- UITableView与UISearchController搜索及上拉加载,下拉刷新
#import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableVi ...
随机推荐
- Markdown语法浅学
typora语法使用 1.字体 *斜体*,_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ <u>下划线</u> ***分割线 , --- 2.标题 # 一级标题 ...
- JZ-062-二叉查找树的第 K 个结点
二叉查找树的第 K 个结点 题目描述 给定一棵二叉搜索树,请找出其中的第k小的结点. 题目链接: 二叉查找树的第 K 个结点 代码 /** * 标题:二叉查找树的第 K 个结点 * 题目描述 * 给定 ...
- 基于ESP8266+BY8301语音模块的与山地车捉迷藏的小项目
基于ESP8266+BY8301语音模块的与山地车捉迷藏的小项目 写在前面: 不知道大家有没有经历过,在茫茫车海中找不到自己山地车情况,针对这个痛点(开玩笑的),我做了个小玩意,纯属娱乐,拿出来,在疫 ...
- egg中使用sequelize事务,实现原子性
let transaction; try { // 建立事务对象 transaction = await this.ctx.model.transaction(); const house = awa ...
- CSRF、DDos避免方式
XSS(Cross-Site Scripting,跨站脚本攻击)是一种代码注入攻击.攻击者在目标网站上注入恶意代码,当被攻击者登陆网站时就会执行这些恶意代码,这些脚本可以读取 cookie,sessi ...
- LGP6146题解
思维僵化了,习惯按照右端点排序,没想到是按照左端点排序... 考虑从左到右依次加入线段,考虑贡献. 设前 \(i\) 条线段的答案为 \(dp[i]\). 考虑两种情况: 不加,贡献为 \(dp[i- ...
- git同步代码到另一分支
将dev分支的代码同步到master 方法一:用git命令 1.git checkout master 2.git merge dev 3.git push --set-upstream origin ...
- 内网渗透----域环境搭建(server 2012)
先确定两台服务器相通 1.配置静态IP与DNS 2.配置域服务 点击服务器管理器-添加角色和功能-下一步-添加AD域服务: 3.提升为域控制器 安装完成后,可在旗帜处选择提升为域控制器 添加新林 添加 ...
- MySQL—事务(ACID)
参考CSDN:https://blog.csdn.net/dengjili/article/details/82468576 1.事务四大特性 原子性(Atomicity) 要么都成功,要么都失败. ...
- Excel批量转Word
平时的工作中,尤其是一些文职类工作中,常会遇到这样的问题: 我们有一个Excel文件,每一行都是一个人的信息,需要将每个人的信息填写到Word表格中:一个人,一张表,一个下午,真烦恼. 也是奇想突发, ...