uniapp 上拉加载更多2种方式
上拉加载更多,方式一:在pages.json 页面配置style。然后在页面onReachBottom(){console.log('onReachBottom')}上拉加载更多,方式一://在scroll-view中lower-threshold='50' @scrolltolower="scrolltolower"<scroll-view scroll-y class="page" lo
上拉加载更多,方式一:
在pages.json 页面配置style。
然后在页面
onReachBottom(){
console.log('onReachBottom')
}
上拉加载更多,方式一:
//在scroll-view中 lower-threshold='50' @scrolltolower="scrolltolower"
<scroll-view scroll-y class="page" lower-threshold='50' @scrolltolower="scrolltolower">
<cu-custom bgColor="bg-gradual-white" >
<block slot="content">车旅荟</block>
</cu-custom>
<scroll-view scroll-x="true" class="scroll_view" :style="'background-color:white;height: 92rpx;line-height: 48rpx;border-top: 1rpx solid #f3f3f3;'" :class="fixed?'fxied':''" :scroll-left='scrollLeft' scroll-with-animation id="tabcard">
<view class="tabList" :style="isEqually?'display: flex;justify-content: space-between;padding-left:0;':''">
<view
:class="'tabItem'+(currentIndex==index?' thisOpenSelect':'')"
:style="isEqually? 'width:'+windowWidth/values.length+'px;line-heiht:54rpx;':''"
v-for="(item,index) in orderType"
:id="'item'+index"
:key='index'
@click="_onClick(index,item)">
<text :style="(currentIndex==index?'font-size:'+activeSize+'rpx;color:'+activeColor:'font-size:'+itemSize+'rpx')">{{item.name}}</text>
<!-- <uni-badge class="member_unibadge" :text="item.qty" type="error" @click="bindClick" :inverted="false"></uni-badge> -->
<view class="activeLine" :style="{width: lineWidth+'rpx'}"></view>
</view>
</view>
</scroll-view>
<view class="member-card" v-for="(data,i) in dataList" :key="i" :class="i === dataList.length-1?'lastChild':''">
<view>
<view class="member_section" style="justify-content: space-between;">
<view style="display: flex;align-items: center;">
<p> {{data.beginCityName}}</p><image class="invoice-arrow" src="../../static/mine/mine_arrow.png"></image><p>{{data.endCityName}}</p>
</view>
<view>
<p v-if="data.orderstatus == '1'" class="member_status apply" >待付款</p>
<p v-if="data.orderstatus == '2'" class="member_status apply" >待取车</p>
<p v-if="data.orderstatus == '3'" class="member_status pass" >运输中</p>
<p v-if="data.orderstatus == '4'" class="member_status pass" >已送达</p>
<p v-if="data.orderstatus == '5'" class="member_status apply" >待评价</p>
</view>
</view>
<view class="member_part" >
<view class="member_detail" >
<p class="member_detail_car">车辆信息:{{(data.modelsname==null || data.modelsname=='')?data.brandname:data.modelsname}}</p>
<p>车辆数量:{{data.qty}}辆</p>
<p>取车日期: {{data.pickcardate}}</p>
<p>送车日期: {{data.sendcardate}}</p>
</view>
<view>
<p class="member_price">¥{{data.totalprice}}</p>
<p v-if="data.orderstatus == '1'" class="member_btn_check paybtn" @click="handlePay" data-target="Modal">立即支付</p>
<p v-if="data.orderstatus == '3'" class="member_btn_check trackbtn" @click="handleDetail" data-target="Modal">订单追踪</p>
<p v-if="data.orderstatus == '5'" class="member_btn_check ratebtn" @click="handleRate" data-target="DialogModal" >评价</p>
<p v-if="data.orderstatus != '1' && data.orderstatus != '3' && data.orderstatus != '5'" class="member_btn_check trackbtn" @click="handleOrderDetail(data.ywId)" data-target="Modal">订单详情</p>
</view>
</view>
</view>
</view>
<view v-show="!isLoadMore" class="noMore">
<p>没有更多了!</p>
</view>
</scroll-view>
data(){
return{
dataList:[],
isLoadMore:false, //是否加载中
query: {
size: this.$util.pageSize(), //每页显示条数
current: 1,//当前页
ascs: null,//升序字段
descs:"CREATE_TIME" //倒序字段
},
}
}
onLoad:{
this.loadPage();
}
methods:{
//上拉触底函数
scrolltolower(){
if(this.isLoadMore){ //此处判断,上锁,防止重复请求
this.isLoadMore=true
this.query.current+=1
this.loadPage()
}
},
loadPage(orderstatus){
//加载列表数
uni.showLoading({
title: '加载中'
});
let url= "/yw/YwCarinfo/page";
this.$api.loadPage(url,this.query,{
"orderstatus":orderstatus,
"t":Math.random()
}).then((res) => {
uni.hideLoading();
console.log("loadPage")
console.log(res)
// this.dataList = res.data.data.records
this.dataList=this.dataList.concat(res.data.data.records)
console.log(res.data.data.current,'当前页')
if(res.data.data.current<res.data.data.pages){ //判断接口返回数据量小于请求数据量,则表示此为最后一页
this.isLoadMore=true
}else{
this.isLoadMore=false
}
}).catch((err) => {
uni.hideLoading();
console.log(err)
})
},
}
//参考文章
更多推荐
所有评论(0)