更新记录

1.0.4（2023-10-10）

修改bug

1.0.3（2023-10-10）

修改bug

1.0.2（2023-10-10）

1.定义变量

data() {
    return {
        list: [],
        status: 'noMore',
        scrollHeight: 500,
        objHeight: {
            h2: '',
            h3: '',
        },
        pagination: {
            page: 1,
            pageSize: 15,
        },
    }
},

2.直接在代码中使用

<chuizi-refresh @scrolltolower="clickLoadMore" @onRefresh="refresh" :pullupLoadingType="status"
                    :scrollHeight="scrollHeight">
            <view class="test" v-for="(item,index) in list" :key="index" >
            .....
            </view>
</chuizi-refresh>

2.设置列表的高度，计算出整体高度，计算出需要抛出的高度，算出列表高度

onReady() {
    const _t = this
    uni.getSystemInfo({
        success: (res) => {
            let allHeight = res.windowHeight

            // const ele2 = uni.createSelectorQuery().select('.hidden-select')

            // ele2.boundingClientRect((data) => {
            //  _t.objHeight.h2 = data.height
            // }).exec()

            _t.scrollHeight = allHeight - 60 

        }
    })
},

3.定义方法

methods: {
    clickLoadMore() {
        if (this.status === 'more') {
            this.status = 'loading'
            setTimeout(() => {
               //去请求数据
            }, 600)
        }
    },

    refresh() {
        this.status = 'more'
        this.pagination.page = 1
        this.list = []
       //去请求数据
    },
    getData(){
            // if (res && res.records && res.records.length) {
            //  this.list = this.pagination.page === 1 ? res.records : this.list.concat(res.records)
            //  if (res.records.length <= 0 || res.records.length < this.pagination.pageSize) {
            //      this.status = 'noMore'
            //  } else {
            //      this.pagination.page++
            //      this.status = (this.pagination.page - 1) >= res.pages ? 'noMore' : 'more'
            //  }
            // } else {
            //  this.list = []
            // }

    }
}

平台兼容性

1.定义变量

data() {
    return {
        list: [],
        status: 'noMore',
        scrollHeight: 500,
        objHeight: {
            h2: '',
            h3: '',
        },
        pagination: {
            page: 1,
            pageSize: 15,
        },
    }
},

2.直接在代码中使用

<chuizi-refresh @scrolltolower="clickLoadMore" @onRefresh="refresh" :pullupLoadingType="status"
                    :scrollHeight="scrollHeight">
            <view class="test" v-for="(item,index) in list" :key="index" >
            .....
            </view>
</chuizi-refresh>

3.设置列表的高度，计算出整体高度，计算出需要抛出的高度，算出列表高度

onReady() {
    const _t = this
    uni.getSystemInfo({
        success: (res) => {
            let allHeight = res.windowHeight

            // const ele2 = uni.createSelectorQuery().select('.hidden-select')

            // ele2.boundingClientRect((data) => {
            //  _t.objHeight.h2 = data.height
            // }).exec()

            _t.scrollHeight = allHeight - 60 

        }
    })
},

4.定义方法

methods: {
    clickLoadMore() {
        if (this.status === 'more') {
            this.status = 'loading'
            setTimeout(() => {
               //去请求数据
            }, 600)
        }
    },

    refresh() {
        this.status = 'more'
        this.pagination.page = 1
        this.list = []
       //去请求数据
    },
    getData(){
            // if (res && res.records && res.records.length) {
            //  this.list = this.pagination.page === 1 ? res.records : this.list.concat(res.records)
            //  if (res.records.length <= 0 || res.records.length < this.pagination.pageSize) {
            //      this.status = 'noMore'
            //  } else {
            //      this.pagination.page++
            //      this.status = (this.pagination.page - 1) >= res.pages ? 'noMore' : 'more'
            //  }
            // } else {
            //  this.list = []
            // }

    }
}