app、小程序下拉刷新上拉加载 - 更新日志
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.0.1(2023-10-10)
1.定义变量
return {
list: [],
status: 'noMore',
scrollHeight: 500,
objHeight: {
h2: '',
h3: '',
},
pagination: {
page: 1,
pageSize: 15,
},
}
},
2.直接在代码中使用
:scrollHeight="scrollHeight">
<view class="test" v-for="(item,index) in list" :key="index" >
.....
</view>
</chuizi-refresh>
2.设置列表的高度,计算出整体高度,计算出需要抛出的高度,算出列表高度
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.定义方法
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.0.0(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">
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 = [] // }
} }