下载插件  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 使用的更多相关文章

  1. vue-scroller记录滚动位置

    问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的bef ...

  2. 鼠标滚轮更改transform的值(vue-scroller在PC端的上下滑动)

    目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的.在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面. 起初,项目的初衷 ...

  3. vue-scroller的使用 实现下拉刷新 上拉加载初始效果

    安装vue-scroller npm i vue-scroller -D 在main.js中: import VueScroller from 'vue-scroller' Vue.use(VueSc ...

  4. vue-scroller实现vue单页面的上拉加载和下拉刷新问题

    在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...

  5. vue-scroller使用

    <template> <div class="page page-scroller"> <scroller class="scroller& ...

  6. vue-scroller的使用

    一 安装 使用npm 安装 npm install vue-scroller -S 二 引入 https://www.jianshu.com/p/a39f5276ff0b https://www.np ...

  7. vue-scroller的使用 && 开发自己的 scroll 插件

    vue-scroller的使用 在spa开发过程中,难免会遇到使用scroll的情况,比如下面的: 即,当用户选择好商品之后,点击购物车,就会有一个购物车弹窗,如果选择的商品小于三个,刚好合适,如果多 ...

  8. ios浏览器调试踩坑(1)----mescroll.js和vue-scroller

    主要记录在ios浏览器出现触摸无限加载的情况 使用vue-scroller和mescroll.js/mescroll.vue先踩ios浏览器默认滑动会影响mescroll的方法调用. 首先给公共js加 ...

  9. vue-scroller 滑动组件使用指南

    在页面中经常会用到滚动,下拉刷新,下拉加载等功能,vux的scroller可以使用,但是它不再维护,而且要配合load-more组件一起使用.所以一般在项目中我都是用vue-scroller. vue ...

随机推荐

  1. JS数组reduce()方法详解及高级技巧

    1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...

  2. Servlet(自己实现的Servlet)细节

    Java中无状态的对象就是指某种没用任何属性的仅仅由方法组成的对象. *无状态:无状态方法的好处之一,就是在各种环境下,都可以安全调用.衡量一个方法 是否有状态的,就看它是否改动了其他东西. *有状态 ...

  3. Sessions Hang on row cache lock

    Sessions Hang on "row cache lock" (dc_objects) While Creating & Dropping a Table Concu ...

  4. Elasticsearch学习笔记(九)partial update

    一.什么是partial update? PUT /index/type/id,创建文档&替换文档,就是一样的语法 一般对应到应用程序中,每次的执行流程基本是这样的: (1)应用程序先发起一个 ...

  5. webservice学习教程(一):理论

    一. WebService到底是什么? webservice是一种跨平台,跨语言的规范,用于不同平台,不同语言开发的应用之间的交互 WebService是一个SOA(面向服务的编程)的架构,它是不依赖 ...

  6. 下载安装Git

    1.下载地址:https://git-scm.com/download/win  这里是下载64位的 2.安装步骤 (1)下载完成得到一个exe文件,双击傻瓜式安装 (2)开始安装 (3)选择安装的工 ...

  7. OFFICE 您正试图运行的函数包含有宏或需要宏语言支持的内容。

    故障现象:打开WORD的时候,提示“您正试图运行的函数包含有宏或需要宏语言支持的内容.而在安装此软件时,您(或您的管理员)选择了不安装宏或控件的支持功能”. 提示现象: 解决办法 : 1.进入“控制面 ...

  8. 使用paginate分页后数据处理

    public function index(){ $sql = ""; $list = ""; $pagenumber = 20;//默认分页条数 //查询数据 ...

  9. 正则表达式-----re库

    1.正则表达式的概念 a.为什么要用正则? 用字符串匹配也是可以的: startswith() 方法用于检查字符串是否是以指定子字符串开头,如果是则返回 True,否则返回 False.如果参数 be ...

  10. 我的第三篇博客(激动激动真激动!!!)A-B Problem

    #210. 差(A-B problem) 题目描述 楠楠在网上刷题,感觉第一题:求两数的和(A+B Problem)太无聊了,于是增加了一题:A-B Problem,难倒了一群小朋友,哈哈. 题目是这 ...