一款易用、高可定制的vue翻页组件 vo-pages
一款易用、高可定制的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: 0, // 持续展示 toast forbidClick: true, // 禁用背景点击 loadingType: 'spinner', message: '拼命加载中' }); this.apiPost('/api/info/list',json) .then((res) => { Toast.clear(); if(res.ret == 0){ 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 + 1; this.loadedAll = false; }else{ this.page = res.data.current_page + 1; this.loadedAll = true; // 全部加载结束 } }else{ Toast.fail(res.res_info); } }, (err) => { console.log(err) }); }, /** * 上拉加载 */ pullingUp(){ setTimeout( () => { this.initDate('connect'); }, 300); }, /** * 下拉刷新 */ pullingDown(){ this.page = 1; setTimeout( () => { this.initDate(); }, 400); }
浩楠哥