vue-scroller下拉刷新及无限加载组件学习之路

在做vue相关的H5时用的vue-scroller来进行的分页,由于是第一次接触vue这个东西当时左好多东西都是懵懂的,在踩过无数个坑之后终于现在觉得自己比以前好很多了。

1:本人用的vue-cli搭建的项目

2:用npm install vue-scroller --save下载对应的包

3:在入口文件import scroller from "vue-scroller" 接下来就是vue.use(scroller);

4:直接在组件中运用scroller插件

<template>
    <scroller delegate-id="myScroller" :on-refresh="refresh" :on-infinite="loadMore"
    v-ref:my_scroller>
        <div v-for="(index, item) in items" @click="onItemClick(index, item)"
        class="row" :class="{'grey-bg': index % 2 == 0}">
            {{ item }}
        </div>
    </scroller>
</template>
<script>
    import Scroller from 'vue-scroller'export
default {
        components:
        {
            Scroller
        },
        data() {
            return {
                items: []
            }
        },
        ready() {
            for (let i = 1; i <= 20; i++) {
                this.items.push(i + ' - keep walking, be 2 with you.')
            }
            this.top = 1 this.bottom = 20 setTimeout(() = >{
                /* 下面2种方式都可以调用 resize 方法 */
                // 1. use scroller accessor
                $scroller.get('myScroller').resize()
                // 2. use component ref
                // this.$refs.my_scroller.resize()
            })
        },
        methods: {
            refresh() {
                setTimeout(() = >{
                    let start = this.top - 1
                    for (let i = start; i > start - 10; i--) {
                        this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
                    }
                    this.top = this.top - 10;
                    /* 下面3种方式都可以调用 finishPullToRefresh 方法 */
                    // this.$broadcast('$finishPullToRefresh')
                    $scroller.get('myScroller').finishPullToRefresh()
                    // this.$refs.my_scroller.finishPullToRefresh()
                },
                1500)
            },
            loadMore() {
                setTimeout(() = >{
                    let start = this.bottom + 1
                    for (let i = start; i < start + 10; i++) {
                        this.items.push(i + ' - keep walking, be 2 with you.')
                    }
                    this.bottom = this.bottom + 10;
                    setTimeout(() = >{
                        $scroller.get('myScroller').resize()
                    })
                },
                1500)
            },
            onItemClick(index, item) {
                console.log(index)
            }
        }
    }
</script>

  接下来要说的是scroller提供的一些方法:

    • resize :Void
    • triggerPullToRefresh :Void
    • Void finishPullToRefresh :Void
    • scrollTo(x:Integer, y:Integer, animate:Boolean) :Void
    • scrollBy(x:Integer, y:Integer, animate:Boolean) :Void
    • getPosition :Object

 

 

 

 

 

 

 

 

Vue. use(VueScroller)

转载于:https://www.cnblogs.com/hl2016-10-28/p/8583970.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-virtual-scroller是一个用于Vue.js的虚拟滚动组件,它可以实现高性能的长列表渲染。下面是使用vue-virtual-scroller实现下拉加载的步骤: 1. 首先,安装vue-virtual-scroller依赖: ```shell npm install vue-virtual-scroller -d ``` 2. 在你的Vue组件中引入vue-virtual-scroller: ```javascript import { RecycleScroller } from 'vue-virtual-scroller'; import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; export default { components: { RecycleScroller }, // ... } ``` 3. 在模板中使用vue-virtual-scroller组件,并设置相应的属性和事件: ```html <template> <div class="wrapper"> <recycle-scroller :items="items" :item-size="50" :min-item-size="50" :max-item-size="50" :buffer="10" :page-mode="true" @load="loadMore" > <template slot-scope="props"> <!-- 渲染每个列表项的内容 --> <div class="item">{{ props.item }}</div> </template> </recycle-scroller> </div> </template> ``` 4. 在Vue组件的data中定义items数组,并在created钩子函数中初始化items: ```javascript export default { data() { return { items: [] }; }, created() { this.initItems(); }, methods: { initItems() { // 初始化items数组,可以从后端获取数据并赋值给items // 示例:假设从后端获取了10条数据 this.items = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`); }, loadMore() { // 加载更多数据的逻辑 // 示例:假设每次加载5条数据 const startIndex = this.items.length; const endIndex = startIndex + 5; const newItems = Array.from({ length: 5 }, (_, index) => `Item ${index + startIndex + 1}`); this.items = [...this.items, ...newItems]; } } } ``` 5. 根据你的需求,可以自定义样式来美化滚动区域。 以上是使用vue-virtual-scroller实现下拉加载的基本步骤。你可以根据自己的具体需求进行进一步的定制和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值