无线加载,样式自己写,效果如下
//html:
<scroll-view scroll-y="true" style="width: 100%; height: 100vh; overflow: auto;"
lower-threshold="50" bindscrolltolower="scroll" >
<view class="task-list" v-for="(it,index) in listDataAll" :key="index">
<view class="list-1" >
<view class="line-d"></view>
<view class="text">
<view class="text-in">
<view class="in-1">{{it.contactsName}} {{it.mobilePhoneNum}}</view>
<view class="in-2">
<img v-if="it.emergent" class="icon" src="@/static/urgent.jpg" alt="" />
</view>
<view class="in-3">
<view class="button-h" :class="{'button-h-deal':it.status<=20}"
v-if="it.status<=20">{{it.statusName}}</view>
<view class="button-h" :class="{'button-h-g':it.status==40}"
v-if="it.status==40">{{it.statusName}}</view>
<view class="button-h" v-if="it.status>=70">{{it.statusName}}</view>
</view>
</view>
</view>
</view>
<view class="list-2">
<view class="in-1"><img class="icon-l" src="@/static/ad-l.png" alt=""/>地点:</view>
<view class="in-2">{{it.spaceName}}</view>
</view>
<view class="list-2">
<view class="in-1"><img class="icon-l" src="@/static/ad-e.png" alt=""/>描述:</view>
<view class="in-2">{{it.remark}}</view>
</view>
<view class="list-3">{{it.createTime}} </view>
</view>
<view v-if="overShow"
style="width: 100%; text-align: center; font-size: 24rpx; color:#999999;
padding-bottom: 20rpx;">数据加载完</view>
</scroll-view>
//js
overShow:false,
scroll(event){
this.listParmas.pageNum = parseInt(this.listParmas.pageNum)+1;
this.listApi(this.listParmas);//请求你自己的接口
},
效果图
网友评论