您的位置: 首页  >  IT文章  >  一款易用、高可定制的vue翻页组件 vo-pages 一款易用、高可定制的vue翻页组件

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

分类: IT文章 • 2022-11-02 00:35:56

在线体验：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

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

config配置项

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

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

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);
            }

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

相关推荐