https://github.com/eightfeet/vue-scrolllist

Vue 手机端下拉刷新（翻页）组件
https://github.com/eightfeet/vue-scrolllist

Last synced: 16 days ago
JSON representation

Vue 手机端下拉刷新（翻页）组件

• Host: GitHub
• URL: https://github.com/eightfeet/vue-scrolllist
• Owner: eightfeet
• Created: 2016-09-19T02:27:37.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-19T06:07:04.000Z (about 8 years ago)
• Last Synced: 2024-09-28T03:47:02.070Z (about 2 months ago)
• Language: Vue
• Homepage:
• Size: 26.4 KB
• Stars: 3
• Watchers: 0
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
vue-scrolllist

==============

Vue 手机端下拉刷新（翻页）组件，页面下拉 -> 触底 -> 请求Api -> 刷新视图。建议es6语法；

当翻页到最后一页时滚动停止请求接口

### 一、安装

cd to you project

```ssh

npm install vue-scrolllist

```

### 二、使用

#### example.vue ####

```html

  


    

      


        


            bala bala ...

        

      

    

  


```

```js

// 引入组件

import scrolllist from 'vue-scrolllist';

module.exports = {

  methods: {

    // 翻页方法

    getProducts () {

      // 请务必Promise

      return new Promise((resolve, reject) => {

        ApiRequest.post({

          // 每页条数

          size: this.size, 

          // 当前页

          page: this.currentpage 

        }).then((res) => {

          // success 

          // 接口数据赋值

          this.productslist = [...this.productslist, ...res.data.content];

          // 返回总共条数

          this.totalElements = res.data.totalElements;

          // 每次请求当前＋1，初始化下一页的页码

          this.currentpage = res.data.number + 1;

          // Promise resolve

          resolve();

        }, (res) => {

          // error 

        });

      });

    }

  },

  data () {

    return {

      productslist: [],

      // 定义每页显示多少条

      size: 3,

      // 初始化起始页面，视接口返回第一页的值而定

      currentpage: 0,

      // 总共返回数据，用于计算是否到达结果页

      totalElements: null

    };

  },

  ready () {

    // 首次获取产品

    this.getProducts();

  },

  components: {

    // 初始化组件

    scrolllist

  }

};

```

### 三、参数说明

	

		参数

		介绍

		类型

		备注

	

	

    		scrollaction

		请求接口，翻页方法

		function

		必填,请务必 return Promise 对象

  	

  	

    		currentpage

		当前页面

		string

		必填,提供当前页面值给组件计算

  	

  	

    		pagesize

		每页显示条数

		string

		必填,提供当前页面值给组件计算

  	

	

    		totalsize

		接口数据条数

		string

		必填,提供当前页面值给组件计算

  	

  	

    		scrollname

		滚动列表名称

		string

		选填,如果一个页面中有多个滚动条时要通过给组建命名加以区分

  	

### PS：

==============

父级dom位置决定组件位置

一个页面用多个滚动插件时要记得给插件命名

```html

```

![](./ex.png)