Skip to content
vue-cli3+ts开发基于better-scroll2.0的移动端翻页组件
JavaScript Vue Other
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
lib
public
src
tests/unit
.browserslistrc
.editorconfig
.eslintrc.js
.gitignore
LICENSE
README.md
babel.config.js
jest.config.js
package.json
postcss.config.js
tsconfig.json
yarn.lock

README.md

在线体验与源码

易用?高可定制?

  • 易用: 基础使用只需要列表数据、上拉事件、下拉事件就完成了翻页、刷新功能的开发
  • 高可定制: 提供了各种配置项,用于提示语配置、样式修改、上拉下拉事件切换等等功能

使用

  • 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>

更多案例参考:vo-pages/examples

API

参数 说明 类型 默认值
data 数据列表 array 必填
click 是否可响应用户点击事件 boolean true
loadedAll 是否已加载所有数据 boolean false
pullUpHandle 是否开启上拉事件,如果不需要上拉事件,必须设置为false object | boolean true
pullDownHandle 是否开启下拉事件,如果不需要下拉事件,必须设置为false object | boolean {threshold: 50,stop: 30}
pullDownToLoadmore 是否下拉加载更多 boolean false
noDataHint 初始化/无数据时是否提示 boolean true
config 自定义设置 object {}

点击pullUpHandlepullDownHandle查看详细介绍

config配置项

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

参数 说明 类型 默认值
pullDownMsgDelay 下拉提示语展示时长(ms) number 800
loading 加载中……
refresh 刷新中…… |加载中……
refreshed 刷新成功 | 已加载
loadedAllMsg 已加载全部
pullUpMsg 上拉加载更多
pullDownMsg 下拉刷新 | 下拉加载更多
touchLeaveMsg 释放立即刷新 | 释放加载更多
noData 暂无数据
pullDownStyle 下拉提示样式 {}
pullUpStyle 上拉提示样式 {}
endLineStyle 底线样式 {}

Events

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

Slot

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

注意

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

TODO

  • 下拉图标(掘金下拉效果)
  • css自动加载

如果各位大佬使用中遇到bug或不爽的点,还希望可以给提issue,您的反馈使我进步,非常感谢。

再次奉上项目源码

You can’t perform that action at this time.