一款易用、高可定制的vue翻页组件
一款易用、高可定制的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:上拉超过
pullUpHandle
的threshold
触发 - pullingDown: 下拉超过
pullDownHandle
的threshold
触发
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();
}, );
}
一款易用、高可定制的vue翻页组件的更多相关文章
- 克拉夫斯曼高端定制 刘霞---【YBC中国国际青年创业计划】
克拉夫斯曼高端定制 刘霞---[YBC中国国际青年创业计划] 克拉夫斯曼高端定制 刘霞
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- 一款很便捷很实用的框架——vue.js
Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- 10款无限滚动自动翻页jquery插件
2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...
- SharePoint 2007 列表页定制--4个默认页定制
以"简单的领导简介"为例,欢迎大家指正 背景:项目中需要有领导简介的模块,就开始制作领导简介,本来很简单,有一个列表就可以,然后在前台展示出来,但是客户看到我们的效果,尤其输入领导 ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- 7款易上手C语言编程软件推荐
C语言是一门历史很长的编程语言,其编译器和开发工具也多种多样,其开发工具包括编译器,现举几个开发工具供大家选择,当然也要根据自己的操作系统来选择适合自己的开发工具. 好多刚开始接触c语言的朋友都想知道 ...
- 把 Notepad++ 打造成一款易用的C#脚本编辑器
以前一直用Linqpad在写小程序脚本,但是Linqpad自动完成功能要收费,且不开源,这样的话就不方便扩展了.今天在 http://csscriptnpp.codeplex.com/ 发现了一款C# ...
随机推荐
- 神奇的hsl
HSL色彩模式是工业界的一种颜色标准,是通过对色相(H).饱和度(S).明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的.今天我们看看这种色彩模式,能在CSS中产生什么神奇的变 ...
- xiugai2
<div class="myLoading"> <div class="svg-wrap"> <svg width="8 ...
- python实现压缩文件成zip格式
实现代码如下: #压缩文件 import time,zipfile class zip: def get_zip(self,files,zip_name): zp=zipfile.ZipFile(zi ...
- GitBook "How to be a programmer"
网址:https://www.gitbook.com/book/braydie/how-to-be-a-programmer/ 最近看了这本 GitBook,主要讲程序员应该掌握的技能和注意的问题,分 ...
- jq 与原生js 方法互相转换
最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.虽然jq很简单,但是也有兼容问题,js基础是很重要的,jq的成功当时是因为ie6.7.8.9.10.chrom ...
- [Python3] 021 面向对象 第一弹
目录 1. 面向对象概述 1.1 OOP 思想 1.2 几个名词 1.3 类与对象 2. 类的基本实现 2.1 类的命名 2.2 如何声明一个类 2.3 如何实例化一个类 2.4 如何访问对象成员 2 ...
- Python模块之pdfkit
1.安装依赖 pip install python-docx #Python下的Microsoft Word 2007工具 pip install PyPDF2 #Python下的PDF工具 pip ...
- .net 学习官网
https://docs.microsoft.com
- sqlserver创建索引语句
CREATE INDEX PersonIndex ON 表名 (字段名) DROP INDEX PersonIndex ON 表名
- Centos7.6替换自带的jre安装jdk
Centos7.6自带jre 1.8,可以作为java运行环境.但如果要编译java程序那就需要jdk,以下介绍如何把自带的jre卸掉并安装jdk 首先要卸载自带的jre PS:由于不同版本的操作系统 ...