VueScroller 使用
下载插件 npm install vue-scroller -D
引入插件:
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
demo
<template>
<div>
<scroller :on-refresh="refresh" :on-infinite="infinite" no-data-text="加载完成" refresh-text="下拉刷新" ref="my_scroller">
<div v-for="(item, index) in items" @click="onItemClick(index, item)" class="row" :class="{'grey-bg': index % 2 == 0}">
<p>序号:{{index+1}}</p>
<p>昵称:{{ item.nikename }}</p>
<p> 时间:{{ item.createTime }}</p>
</div>
</scroller>
</div>
</template>
<script>
import { getaa } from '@/api/api';
export default {
data() {
return {
items: [],
pageSize: 10,
pageNo: 1,
maxpage: 1,
counts: 0
}
},
mounted() { },
methods: {
getDate(offset, fn) {
var _this = this;
var params = {
page: this.pageNo,
limit: this.pageSize,
sidx: "",
order: ""
};
getaa(params).then(res => {
var data = res.data.page.list;
_this.counts = res.data.page.totalCount;
var n = res.data.page.totalCount;
var m = _this.pageSize;
if(n % m > 0) {
_this.maxpage = parseInt(n / m) + 1;
} else {
_this.maxpage = parseInt(n / m);
}
if(_this.pageNo > _this.maxpage) {
fn(true);
return;
} else {
if(fn) fn();
this.items = this.items.concat(data);
}
})
},
infinite(done) {
this.pageNo++; //每当向上滑动的时候就让页数加1
setTimeout(() => {
this.getDate(this.pageNo, done);
}, 1500)
},
refresh(done) {
//这是向下滑动的时候请求最新的数据
this.pageNo = 1;
setTimeout(() => {
this.items = [];
this.getDate(this.pageNo, done);
}, 1500)
},
onItemClick(index, item) {
console.log(index)
}
}
}
</script>
<style>
@import url("../../assets/css/style.css");
.row {
padding: 20px;
border-bottom: 1px solid red;
}
</style>
VueScroller 使用的更多相关文章
- vue-scroller记录滚动位置
问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的bef ...
- 鼠标滚轮更改transform的值(vue-scroller在PC端的上下滑动)
目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的.在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面. 起初,项目的初衷 ...
- vue-scroller的使用 实现下拉刷新 上拉加载初始效果
安装vue-scroller npm i vue-scroller -D 在main.js中: import VueScroller from 'vue-scroller' Vue.use(VueSc ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
- vue-scroller使用
<template> <div class="page page-scroller"> <scroller class="scroller& ...
- vue-scroller的使用
一 安装 使用npm 安装 npm install vue-scroller -S 二 引入 https://www.jianshu.com/p/a39f5276ff0b https://www.np ...
- vue-scroller的使用 && 开发自己的 scroll 插件
vue-scroller的使用 在spa开发过程中,难免会遇到使用scroll的情况,比如下面的: 即,当用户选择好商品之后,点击购物车,就会有一个购物车弹窗,如果选择的商品小于三个,刚好合适,如果多 ...
- ios浏览器调试踩坑(1)----mescroll.js和vue-scroller
主要记录在ios浏览器出现触摸无限加载的情况 使用vue-scroller和mescroll.js/mescroll.vue先踩ios浏览器默认滑动会影响mescroll的方法调用. 首先给公共js加 ...
- vue-scroller 滑动组件使用指南
在页面中经常会用到滚动,下拉刷新,下拉加载等功能,vux的scroller可以使用,但是它不再维护,而且要配合load-more组件一起使用.所以一般在项目中我都是用vue-scroller. vue ...
随机推荐
- JS数组reduce()方法详解及高级技巧
1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...
- Servlet(自己实现的Servlet)细节
Java中无状态的对象就是指某种没用任何属性的仅仅由方法组成的对象. *无状态:无状态方法的好处之一,就是在各种环境下,都可以安全调用.衡量一个方法 是否有状态的,就看它是否改动了其他东西. *有状态 ...
- Sessions Hang on row cache lock
Sessions Hang on "row cache lock" (dc_objects) While Creating & Dropping a Table Concu ...
- Elasticsearch学习笔记(九)partial update
一.什么是partial update? PUT /index/type/id,创建文档&替换文档,就是一样的语法 一般对应到应用程序中,每次的执行流程基本是这样的: (1)应用程序先发起一个 ...
- webservice学习教程(一):理论
一. WebService到底是什么? webservice是一种跨平台,跨语言的规范,用于不同平台,不同语言开发的应用之间的交互 WebService是一个SOA(面向服务的编程)的架构,它是不依赖 ...
- 下载安装Git
1.下载地址:https://git-scm.com/download/win 这里是下载64位的 2.安装步骤 (1)下载完成得到一个exe文件,双击傻瓜式安装 (2)开始安装 (3)选择安装的工 ...
- OFFICE 您正试图运行的函数包含有宏或需要宏语言支持的内容。
故障现象:打开WORD的时候,提示“您正试图运行的函数包含有宏或需要宏语言支持的内容.而在安装此软件时,您(或您的管理员)选择了不安装宏或控件的支持功能”. 提示现象: 解决办法 : 1.进入“控制面 ...
- 使用paginate分页后数据处理
public function index(){ $sql = ""; $list = ""; $pagenumber = 20;//默认分页条数 //查询数据 ...
- 正则表达式-----re库
1.正则表达式的概念 a.为什么要用正则? 用字符串匹配也是可以的: startswith() 方法用于检查字符串是否是以指定子字符串开头,如果是则返回 True,否则返回 False.如果参数 be ...
- 我的第三篇博客(激动激动真激动!!!)A-B Problem
#210. 差(A-B problem) 题目描述 楠楠在网上刷题,感觉第一题:求两数的和(A+B Problem)太无聊了,于是增加了一题:A-B Problem,难倒了一群小朋友,哈哈. 题目是这 ...