上拉加载更多,方式一:

在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)
                })
            },

}

 

 

//参考文章

https://www.cnblogs.com/huihuihero/p/13206958.html

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐