一款易用、高可定制的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>

/**
* 初始化
*/
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();
}, );
}