更新记录

1.0.0（2025-09-10） 下载此版本

• 自定义ScrollView组件1.0.0版本发布
• 支持下拉刷新，滚动加载

平台兼容性

uni-app(4.65)

uni-app x(4.65)

其他

ziqirj-scroll-view

• 组件名：ziqirj-scroll-view
• 代码块： ScrollView
• 关联组件：scss/sass，uni-load-more

插件说明

• 1、自定义ScrollView组件1.0.0版本发布
• 2、支持下拉刷新，滚动加载

平台支持

使用说明

组件参数

可用方法

回调函数

插槽

使用示例

<template>
    <ziqirj-page-view title="自定义ScrollView">
        <ziqirj-scroll-view ref="defaultScrollViewRef" :refresherEnabled="true" :load-more-enabled="next"
            @refresher="refresherFn" @loadMore="loadMoreFn" >

            <image v-for="(item, index) in dataList" :key="index"
                        src="/static/images/tab1.jpeg" style="width: 100%; height: 100%;"></image>

        </ziqirj-scroll-view>
    </ziqirj-page-view>
</template>

<script>
    export default {
        data() {
            return {
                queryParams: {
                    pageNum: 1,
                    pageSize: 10
                },
                next: true,
                dataList: []
            }
        },
        mounted() {
            this.$refs.defaultScrollViewRef.scrollRefresh()
        },
        methods: {
            reloadData() {
                this.queryParams.pageNum = 0
                this.next = true
                this.dataList = []
                this.loadMoreData()
            },
            refresherFn() {
                this.reloadData()
            },
            loadMoreFn() {
                this.queryParams.pageNum += 1
                this.loadMoreData()
            },
            loadMoreData() {
                if(!this.next) {
                    return
                }

                setTimeout(() => {
                    this.next = this.dataList.length < 3
                    console.log(this.dataList.length)
                    this.dataList.push({})

                    this.$refs.defaultScrollViewRef.stopRefresh()
                    this.$refs.defaultScrollViewRef.stopLoadMore(this.next?'more':'no-more')
                }, 800)
            }
        }
    }
</script>

<style>

</style>

依赖组件

scss/sass

uni-load-more

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

紫琪程序猿