标签：uniapp pageIndex 滚动 carpageIndex const false data pages 加载
一、滚动加载
<order-item v-for="(item,index) in orderList" :item="item" :isHost="isHost" :key="index"></order-item>
<view @tap="reload" class="loading-button" v-if="orderList.length == 0"> 暂无订单~</view>pageIndex: 1,
pageSize: 3,
totalPage: 0,
pages:{},
onReachBottom() {
const {
pageCount
} = this.pages
// 加载更多
if (this.pageIndex < pageCount) {
this.loading = true
this.pageIndex = this.pageIndex + 1
this.loadData()
}
},
methods：{
// 加载数据
loadData() {
if (this.initLoading) {
uni.showLoading()
}
const {
pageIndex,
pageSize
} = this
MemberOrderList({
pageIndex,
pageSize,
filter_fieldtwo: number
}).then(res => {
this.initLoading = false
const {
data,
...pages
} = res.response
this.pages = pages // 记录本次请求的分页参数
this.loading = false
this.loadingFail = false
if(res.response!=null){
this.totalPage = res.response.pageCount
this.handlePageData(data)
}
}).catch(err => {
uni.hideLoading()
this.loading = false
this.loadingFail = true
})
// 处理分页数据
handlePageData(data) {
const {
page = 0, pageSize = 3
} = this.pages
// 比较上一次获取的页码和当前获取数据的页码判断当前需要更新哪部分数据
if (page >= this.pageIndex) {
this.orderList = this.orderList.slice(0, (this.pageIndex - 1) * 3).concat(data)
} else {
this.orderList = this.orderList.concat(data)
}
},
// 加载失败后重新加载
reload() {
this.loading = true
this.loadingFail = false
this.loadData()
} ,
二、区域滚动加载
<scroll-view scroll-y="true" @scrolltolower="lower()" style="height: 40vh;overflow: auto;">
<view
v-for="item in carList"
:key="item.id"
class="car-list-item dis-flex justify-between align-center"
@tap="chooseCar(item.id)">
...
</view>
</scroll-view>
carpageIndex: 1,
carpageSize: 3,
cartotalPage: 0,
carpages:{},
methods：{
lower(e){
const {
pageCount
} = this.carpages
// 加载更多
if (this.carpageIndex < pageCount) {
this.carpageIndex = this.carpageIndex + 1
this.loadCarList()
}
console.log(this.carpageIndex,this.carpages)
},
const {
carpageIndex,
carpageSize
} = this
listCarInformationByPage({pageIndex: carpageIndex, pageSize: carpageSize, filter_fieldone: this.userId}).then(res => {
uni.hideLoading()
const {
data,
...pages
} = res.response
let list = data.map(car => {
return {
...car,
colourWord: (this.colorList.find(v => v.text == car.colour) || {}).color || '',
currentCar: (car.car_number==car_number?true:false)
}
})
this.carpages = pages // 记录本次请求的分页参数
this.loading = false
this.loadingFail = false
this.cartotalPage = res.response.pageCount
this.CarPageData(list)
}).catch(err => {
uni.hideLoading()
})
// 处理分页数据
CarPageData(data) {
const {
page = 0, pageSize = 3
} = this.carpages
// 比较上一次获取的页码和当前获取数据的页码判断当前需要更新哪部分数据
if (page >= this.carpageIndex) {
this.carList = this.carList.slice(0, (this.carpageIndex - 1) * 3).concat(data)
} else {
this.carList = this.carList.concat(data)
}
},
标签：uniapp,pageIndex,滚动,carpageIndex,const,false,data,pages,加载 来源： https://blog.csdn.net/Guoyu1_/article/details/116306162
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。