帮酷LOGO
  • 显示原文与译文双语对照的内容
Infinite scroll list for Vue.js with DOM recycling.

  • 源代码名称:vue-recyclist
  • 源代码网址:http://www.github.com/xtongs/vue-recyclist
  • vue-recyclist源代码文档
  • vue-recyclist源代码下载
  • Git URL:
    git://www.github.com/xtongs/vue-recyclist.git
  • Git Clone代码到本地:
    git clone http://www.github.com/xtongs/vue-recyclist
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/xtongs/vue-recyclist
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • recyclist

    带有DOM回收的Vue.js ( v2.1 + )的无限滚动列表。

    演示程序

    安装

    npm install -D vue-recyclist

    导入

    importVueRecyclistfrom'vue-recyclist'exportdefault {
     ... components: {
     VueRecyclist,
     },
     ...}

    或者

    <scriptsrc="/path/to/vue-recyclist/dist/vue-recyclist.js"></script>

    用法

    <template>
     <div>
    . . .
     <vue-recyclist :list = "list" :tombstone = "tombstone" :size = "size" :offset = "offset" :loadmore = "loadmore" :spinner = "spinner" :nomore = "nomore">
     <!-- tombstone slot --> <templateslot="tombstone"scope="props">
    . . .
     </template>
     <!-- item slot --> <templateslot="item"scope="props">
    . . .
     </template>
     <!-- loading spinner --> <divslot="spinner">Loading...</div>
     <!-- end of list --> <divslot="nomore">No More Data</div>
     </vue-recyclist>
    . . .
     </div>
    </template>
    <script>importVueRecyclistfrom'vue-recyclist'exportdefault {data() {... }, components: {'vue-recyclist': VueRecyclist }, methods: {loadmore() {// Fetch more items... } }}</script>

    命令行选项

    指令类型默认值
    列表Array必选项目列表
    tombstone布尔型false是否显示墓碑
    大小号码10每次添加的项目数
    偏移量号码200允许滚动到的附加长度的像素数
    loadmore函数必选加载更多项的功能
    spinner布尔型true是否显示加载 Spinner
    不再布尔型false是否显示'没有更多数据'状态栏

    插件开发

    # install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build



    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语