下载插件  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. Jquery获取输入框属性file,ajax传输后端,下载图片

    Django web开发获取input属性file,可以用request.FILES.get(' ')直接获取到,然后正常拼接路径就可以下载, 但是今天我们来用异步获取file的值在传输后端下载. 1 ...

  2. Ubuntu上hi3531交叉编译环境arm-hisiv100nptl-linux搭建过程

    安装SDK 1.Hi3531 SDK包位置 在"Hi3531_V100R001***/01.software/board"目录下,您可以看到一个 Hi3531_SDK_Vx.x.x ...

  3. 基础作业 本周没上课,但是请大家不要忘记学习。 本周请大家完成上周挑战作业的第一部分:给定一个整数数组(包含正负数),找到一个具有最大和的子数组,返回其最大的子数组的和。 例如:[1, -2, 3, 10, -4, 7, 2, -5]的最大子数组为[3, 10, -4, 7, 2] 输入: 请建立以自己英文名字命名的txt文件,并输入数组元素数值,元素值之间用逗号分隔。 输出 在不删除原有文件内容

    1丶 实验代码 #include<stdio.h> int main(void) { int tt,nn,i,j,c[11][11]; int flag=1; scanf("%d ...

  4. dddquickly

    在项目开发最初的时候,他也有过一段狂欢般的快乐时光,不久之后,事情就越来越艰难. 项目的代码越来越难以维护,工作越来越像是一种煎熬,合作的同事对他越来越不满. “该是与这个项目,与这个公司说 bye ...

  5. Timestamp “时间戳” - 术语

    A timestamp is a sequence of characters or encoded information identifying when a certain event occu ...

  6. Yoink Mac版(临时文件存储助手)中文版

    Yoink Mac版是Mac上一款临时文件存储助手,当你拖动文件时Yoink for Mac就会出现,拖放文件到Yoink窗口中即可,需要文件时随时都能从Yoink窗口中拖出文件,使用非常便捷,小编准 ...

  7. ubuntu 16.04 搭建tigervnc

    主要参考 https://vitux.com/ubuntu-vnc-server/ apt install xfce4 xfce4-goodies -yapt install -y tightvncs ...

  8. 使用Apache JMeter对SQL Server、Mysql、Oracle压力测试(二)

    接着第一篇的写: 第三步,测试SQL Server数据库的性能: a.加载JDBC SQL Server驱动.添加线程组和设置线程属性和第二步一样,就不再赘述了: b.设置JDBC Connectio ...

  9. Maven 学习笔记-maven属性

    Maven有六类属性: 1)内置属性 主要有两个常用内置属性 ${basedir}:表示项目根目录,即包含pom.xml文件的目录: ${version}:表示项目版本: 2)POM属性 ${M2_H ...

  10. 001-ADO.NET

    Web.config <connectionStrings> <add name="connStr" connectionString="server= ...