一款易用、高可定制的vue翻页组件

在线体验:pages.cixi518.com

使用

npm i vo-pages --save
vo-pages组件父元素必须设置固定高度并填写属性overflow: hidden;如:
height: 100vh;
overflow: hidden;

全局引入

// mian.js
import VoPages from "vo-pages";
import "vo-pages/lib/vo-pages.css";
Vue.component('VoPages', VoPages)

局部引入

import VoPages from 'vo-pages';
import "vo-pages/lib/vo-pages.css";
components: {
VoPages
}

常规使用

<vo-pages :data="list" @pullingUp="pullingUp" @pullingDown="pullingDown" :loadedAll="loadedAll">
<ul class="article-list">
<li class="article" v-for="article in list" :key="article.id">
<slot></slot>
<div class="left">
<img :src="article.image_uri" alt="thumb" />
</div>
<div class="right">
<p>{{ article.title }}</p>
<p>{{ article.author }}</p>
</div>
</li>
</ul>
</vo-pages>

API

config配置项

管道符后面的值是pullDownToLoadmore为ture时(下拉加载更多)的默认值

Events

  • pullingUp:上拉超过pullUpHandlethreshold触发
  • pullingDown: 下拉超过pullDownHandlethreshold触发

Slot

只有一个默认插槽,用来展示用户数据

注意

  • 数据不足一屏时且有下一页时会自动请求下一页数据

完整案例

html

<vo-pages :data="notice_list" @pullingUp="pullingUp" @pullingDown="pullingDown" :loadedAll="loadedAll">
<div class="news_item_wrap"
v-for="(item, index) in notice_list" :key="index"
@click="newsDetail(item.information_id)"
>
<div class="news_item_pic"
v-lazy:background-image="item.poster"
v-if="item.poster && item.poster != ''"
style="background-size: cover;background-repeat: no-repeat;background-position: center top;"
>
</div>
<div class="news_word_wrap">
<div class="news_title">{{item.title}}</div>
<div class="news_bottom_wrap">
<span class="news_push_time">{{item.create_time}}</span>
<van-tag class="news_tag_bottom" color="#FA4E4E" v-if="item.tag == '推荐'">推荐</van-tag>
<img class="hot_tagNews" src="../../assets/newsHot.png" v-if="item.tag == '热门'" alt="">
</div>
</div>
</div>
</vo-pages>

js

/**
* 初始化
*/
initDate(str){
var json = {
page: this.page
};
const toast = Toast.loading({
duration: , // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '拼命加载中'
});
this.apiPost('/api/info/list',json)
.then((res) => {
Toast.clear();
if(res.ret == ){
if(str == 'connect'){
// 数据连接在一起
this.notice_list = this.notice_list.concat(res.data.list);
}else{
this.notice_list = res.data.list;
}
this.total_page = parseInt(res.data.total_page);
if(res.data.current_page < this.total_page){
this.page = res.data.current_page + ;
this.loadedAll = false;
}else{
this.page = res.data.current_page + ;
this.loadedAll = true; // 全部加载结束
} }else{
Toast.fail(res.res_info);
}
}, (err) => {
console.log(err)
});
},
/**
* 上拉加载
*/
pullingUp(){
setTimeout( () => {
this.initDate('connect');
}, );
},
/**
* 下拉刷新
*/
pullingDown(){
this.page = ;
setTimeout( () => {
this.initDate();
}, );
}

原文地址:https://juejin.im/post/5d81da4551882556ba55e50e

一款易用、高可定制的vue翻页组件的更多相关文章

  1. 克拉夫斯曼高端定制 刘霞---【YBC中国国际青年创业计划】

    克拉夫斯曼高端定制 刘霞---[YBC中国国际青年创业计划] 克拉夫斯曼高端定制 刘霞

  2. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  3. 一款很便捷很实用的框架——vue.js

    Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...

  4. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  5. 10款无限滚动自动翻页jquery插件

    2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...

  6. SharePoint 2007 列表页定制--4个默认页定制

    以"简单的领导简介"为例,欢迎大家指正 背景:项目中需要有领导简介的模块,就开始制作领导简介,本来很简单,有一个列表就可以,然后在前台展示出来,但是客户看到我们的效果,尤其输入领导 ...

  7. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  8. 7款易上手C语言编程软件推荐

    C语言是一门历史很长的编程语言,其编译器和开发工具也多种多样,其开发工具包括编译器,现举几个开发工具供大家选择,当然也要根据自己的操作系统来选择适合自己的开发工具. 好多刚开始接触c语言的朋友都想知道 ...

  9. 把 Notepad++ 打造成一款易用的C#脚本编辑器

    以前一直用Linqpad在写小程序脚本,但是Linqpad自动完成功能要收费,且不开源,这样的话就不方便扩展了.今天在 http://csscriptnpp.codeplex.com/ 发现了一款C# ...

随机推荐

  1. [CSP-S模拟测试]:建设城市(city)(组合数学+容斥)

    题目传送门(内部题8) 输入格式 一行三个整数$n,m,k$. 输出格式 一行一个整数表示答案.对$998244353$取模. 样例 样例输入 3 7 3 样例输出 数据范围与提示 对于10%的数据, ...

  2. linux(centos6) 下安装 postgresql-9.3.1.tar.gz

    目录 一. 环境 二.准备工作 三.先安装 make, gcc ,gcc-c++,readline-devel ,zlib-devel .如果已安装,可以忽略 四.开始安装 4.1 解压 tar -z ...

  3. ubuntu18.04英文环境解决各种软件中文乱码问题

    如果要同时支持中文也支持英文,进入到该软件的字体设置界面,字体格式选择为: Noto Sans CJK SC

  4. day17—Flex弹性布局详解(一)

    转行学开发,代码100天——2018-04-02 今天看到一篇大神的文章,关于flex布局的详解,对flex用法介绍的相当详细,非常有助于我等初学者更深入了解这种布局方式. 文章链接 [基础知识]Fl ...

  5. 异常-打开文件过多(too many open files)

    异常-打开文件过多 异常报错如下 09-Oct-2019 15:37:51.923 严重 [http-nio2-8080-Acceptor-0] org.apache.tomcat.util.net. ...

  6. 使用python执行sql语句和外键解析

    一.下载并导入pymysql pip install pymysql && import pymysql db=pymysql.connect(host=) #如果报错host大概率因 ...

  7. Delphi Canvas的FillRect(const Rect: TRect) 函数的作用

    http://blog.163.com/zhangzhifeng688@126/blog/static/165262758201131211341460/ Delphi Canvas的FillRect ...

  8. 简单入门爬斗鱼颜值区妹子照片 v1.1

    这是个比较简单的入门爬虫.基于python3. urllib,urllib2,python3中用urllib.request代替,使用方法基本一致. #python3 import urllib.re ...

  9. 【ABAP系列】SAP ABAP与Java数据类型的对应关系

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP与Java数据类 ...

  10. eclipse配置,快捷键备忘

    1. General --> Workspace --> UTF-82. General --> Editors --> Associations --> JSP --& ...