vux scroller 上拉加载案例记录

最新推荐文章于 2020-09-10 16:03:36 发布

原创最新推荐文章于 2020-09-10 16:03:36 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用VUX库实现的企业百强列表展示页面，该页面具备上拉加载更多数据的功能，详细展示了如何配置Scroller组件以实现数据的动态加载和底部提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="backgroundcolor" style="height:10%"> 
        <x-header title="百强企业"></x-header>

    <!-- use-pullup是否开启上拉，pullup-config上拉属性配置（例如上拉显示的文字之类，
        v-model是否开启禁用上拉,on-pullup-loading上拉加载触发,bounce防止左右滑动
        height设置（这个会影响到上拉时，是否会触碰到底部） -->

        <scroller :use-pullup="showUp" :pullup-config="upobj" :bounce="isbounce" 
        v-model="scrollerStatus" 
        @on-pullup-loading="onScrollBottom" 
        style="width:100%" height="-46px" ref="scroller">

            <div>
                <panel :list="enterpriseList" :type="'5'"></panel>
                <p style="color:gray;width:100%;text-align:center" 
                v-if="onFetching">我也是有底线的...</p>
            </div>

        </scroller>
    </div>
</template>

<script>
import { Panel, Scroller, LoadMore, XHeader } from 'vux'
export default {
    data () {
        return {
            scrollerStatus: {
            pullupStatus: 'default'
        },
        upobj: {
            content: '请上拉刷新数据',
            pullUpHeight: 60,
            height: 40,
            autoRefresh: false,
            downContent: '请上拉刷新数据',
            upContent: '请上拉刷新数据',
            loadingContent: '加载中...',
            clsPrefix: 'xs-plugin-pullup-'
        },
        isbounce: false,
        showUp: true,
        enterpriseList: [],
        list: [],
        onFetching: false,
        pageIndex: 1,
        pageSize: 10
    }
},

components: {
    Panel,
    Scroller,
    LoadMore,
    XHeader
},
created () {
    this.getDataList()
    this.$nextTick(() => {
        this.$refs.scroller.reset()
    })
},
methods: {
// 第一次获取数据列表
getDataList () {
    this.$http({url: this.$http.adornUrl('/enterprise/list'),
    method: 'post',
    data: this.$http.adornData({
        'page': this.pageIndex,
        'limit': this.pageSize
    })
    }).then(({data}) => {
        if (data && data.code === 0) {
            this.enterpriseList = data.page.list
        } else {
            this.enterpriseList = []
        }
    })
},

// 触发上拉加载
onScrollBottom () {
    setTimeout(() => {
        // 上拉获取数据拼接
        this.pullUpGetData()
    }, 2000)
},
// 获取数据
pullUpGetData () {
    // 每次获取十条，页码加一
    var page = this.pageIndex + 1
    var limit = this.pageSize
    this.$http({url: this.$http.adornUrl('/enterprise/list'),
        method: 'post',
        data: this.$http.adornData({
            'page': page,
            'limit': limit
        })
        }).then(({data}) => {
        if (data && data.code === 0) {
            console.log(data)
            // 拼接数据
            this.enterpriseList = this.enterpriseList.concat(data.page.list)
            // 判断是否还有数据
            if (data.page.list.length < 10) {
            // 没有就显示底线以及禁用上拉
                this.onFetching = true
                this.scrollerStatus.pullupStatus = 'disabled'
            } else {
                // 还有数据就开启上拉，并重置
                this.scrollerStatus.pullupStatus = 'default'
                this.$nextTick(() => {
                    this.$refs.scroller.reset()
                })
            }
        }
    })
    }
    }
}
</script>