vue---mint-ui组件loadmore(上拉加载,下拉刷新)
1. 先安装mint-ui
2. 在main.js中引入mint-ui的css样式和组件
import "mint-ui/lib/style.css";
import {Loadmore} from 'mint-ui';
Vue.component(Loadmore.name,Loadmore)
3. 使用loadmore组件
<template>
<div class="page-loadmore">
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
<ul >
<li v-for="item in list" >{{ item }}</li>
</ul>
</mt-loadmore>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
list: [],
allLoaded: false,//数据是否加载完毕
};
},
methods: {
loadTop() {//上拉加载
this.$refs.loadmore.onTopLoaded();
},
loadBottom() {//下拉刷新
var vm = this;
this.$refs.loadmore.onBottomLoaded();
if(!vm.allloaded){
//调用接口(pageNum+1)
}else{
console.log('没有更多数据了')
}
}
},
}; </script>
vue---mint-ui组件loadmore(上拉加载,下拉刷新)的更多相关文章
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
- 上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
- RecyclerView 上拉加载下拉刷新
RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...
- APICloud上啦加载下拉刷新模块
apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- 基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
- Flutter上拉加载下拉刷新---flutter_easyrefresh
前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...
- XListView实现上拉加载下拉刷新
package com.loaderman.androiddemo; import android.content.Context; import android.util.AttributeSet; ...
- SwipeRefreshLayout实现上拉加载下拉刷新
package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...
随机推荐
- ios中[UIScreen mainscreen].bounds 的大小是由什么决定的?
ios中经常会用[UIScreen mainScreen].bounds 来获取屏幕的frame,但最近网上下载了个项目,在模拟器运行起来,打印[UIScreen mainScreen].bounds ...
- 在MyEclipse使用Git新建分支,并上传分支---图文教程
1.选中项目,右键--->Team--->Switch To--->New Branch: 2.在弹出的窗口中,填写新建的分支名称,如下图 3.当前分支就会变成新建分支“test” ...
- 记录2-在mac上安装ubuntu 16.04 LTS
前几天升级了我用了六七年mac硬件,内存由4G变为8G,硬盘也换成1T SSD,索性把一直想装的ubuntu也装了,方便温习下以前的工作环境. 我比较喜欢LTS的版本,所以安装了16.04. 主要步骤 ...
- Sublime Text 3安装Package Control
Package Control官网:https://packagecontrol.io/installation#st3 ctrl + ` 或者 View > Show Console呼出控制台 ...
- cesium3dtiles位置改变
cesium偏移3dtiles高度var heightOffset = 20.0; var boundingSphere = tileset.boundingSphere; var cartograp ...
- c# 复制整个文件夹的内容,Copy所有文件
/// <summary> /// 文件夹下所有内容copy /// </summary> /// <param name="SourcePath"& ...
- mysql修改root密码及修改密码过程中报错的解决方案
参考网站: https://www.linuxidc.com/Linux/2018-05/152586.htmhttps://www.cnblogs.com/wangbaobao/p/7087032. ...
- less和sass的区别
首先sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和 ...
- [UnityShader基础]06.#pragma multi_compile
参考链接: https://blog.csdn.net/qq826364410/article/details/81774741 https://docs.unity3d.com/Manual/SL- ...
- k8s网络
一.同一宿主机的两个容器间通信 通过 Veth Pair 设备 + 宿主机网桥的方式,实现了跟同一宿主机上其他容器通信. 访问流程:当容器1想要跟容器2通信时,IP包会被转发到容器1的eth0这个网卡 ...