1)注册list组件
import Vue from 'vue';
import {List} from 'vant';
Vue.use(List);
2)使用list结构
//主要分为两块，一是外壳的代码块，可固定以及里面的内容区。二是赋初始值属性值。
<van-list
v-model="loading" //是否显示正在加载中
:finished="finished" //是否显示加载完成
finished-text="没有更多了" //加载完成后显示的文本内容
@load="onLoad" //滚动条与底部一致触发该事件
>
中间内容区的数据
</van-list>
<script>
export default(){
data(){
return {
loading:false, //false:加载好了 true:加载中
finished:false // false:没有加载完成 true:加载完成同时显示finished-text属性值 默认是false表示加载更多数据
}
}
},
methods(){
onLoad(){ //触底执行该事件
//中间内容区的数据
}
}
</script>
3)模拟业务逻辑,编写代码
1>以一个接口为准，获取所有得工单任务信息。编写中间内容区的数据，vant list编写内容
2>添加获取得数据集 list
data(){
return{
list:[] //当前所有工单任务信息
}}
3>遍历该list
<div class="totalItem" v-for="item in list" :key="item.woRd" >
<div class="link">
<div class="left">
<div class="fonts"> {{item.materialCode}} </div>
<div>工单单号:{{item.woCode}}</div>
<div>计划开始时间:{{item.jstartDate}}</div>
</div>
<div class="right">
<div class="jindu">进度: {{item.finishNum}}/{{item.num}}</div>
<span><van-icon name="arrow" color="#ccc" size="35"/></span>
</div>
</div>
</div>
4>添加样式(不是专业前端，随便写得望谅解，有更好得排版可提供也学习下)
.totalItem{
height: 65px;
line-height: 65px;
border-bottom: 1px solid #999;
margin-top: 10px;
padding: 10px;
.link{
height: 25px;
line-height: 25px;
color: #999;
position: absolute;
.left{
float: left;
.fonts{
font-size: 20px;
font-weight:bold;
}
}
.right{
float: right;
margin-left: 90px;
}
}
}
5>效果图如下:
image.png
4)继续实现加载更多数据
1>在onLoad() 事件中编写业务代码，这一步是实现了所有功能，包含下拉刷新以及搜索框信息，有不同的小伙伴们，可以指出，后续加上更新讲解
<template>
<div class="mes_woTask">
<div class="serach">
<van-search
v-model="serachValue"
show-action
placeholder="请输入"
@refresh="onRefresh"
@search="onSearch"
@clear="clear"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
</div>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<div class="list">
<div class="total">共{{totalNum}}个任务:</div>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:immediate-check="false"
:offset="50"
>
<div class="totalItem" v-for="item in list" :key="item.woRd" >
<div class="link">
<div class="left">
<div class="fonts"> {{item.materialCode}} </div>
<div>工单单号:{{item.woCode}}</div>
<div>计划开始时间:{{item.jstartDate}}</div>
</div>
<div class="right">
<div class="jindu">进度: {{item.finishNum}}/{{item.num}}</div>
<span><van-icon name="arrow" color="#ccc" size="35"/></span>
</div>
</div>
</div>
</van-list>
</div>
</van-pull-refresh>
</div>
</template>
<script>
export default {
data(){
return{
list:[], //当前所有工单任务信息
serachValue: '', //当前搜索框值
loading:false,
finished:false,
totalNum:0, //加载出当前所有条数
isSearch:false,
refreshing:false, //下拉刷新
prams:{ //搜索事件和加载后台数据，参数都是由后端代码定义的
current:1, //当前页
size:10, //每页显示总数
fields:[{
fieldName:"woCode",
fieldOpt:"like",
fieldVal:''
},{
fieldName:"createTime",
fieldOpt:"order by",
fieldVal:"desc"
}]
}
}
},
created(){
this.getAllWoTask();
},
methods:{
getAllWoTask(){
this.$axios({
method:'post',
url:'/mes/WO/GetAllNewWOInfo',
header:{
'Content-Type':'application/json' //如果写成contentType会报错
},
data: this.prams
}).then(res=>{
const {status,body} = res.data;
if(status==='00'){
this.list=[...this.list,...body.data.list];
this.totalNum=this.totalNum+body.data.list.length;
//每一次加载完设置false，便于下次继续加载
this.loading=false;
this.refreshing = false;
this.isSearch=false;
//判断是否还有数据加载
if(this.prams.size>body.data.list.length){
this.finished=true;
}
}else{
this.$toast.fail(body.msgDes)
}
});
},
onLoad(){
if (this.refreshing) {
this.list = [];
this.refreshing = false;
this.prams.fields[0].fieldVal=this.serachValue;
}else if(this.isSearch){
this.list = [];
this.totalNum=0;
this.prams.current=1;
this.prams.fields[0].fieldVal=this.serachValue;
}
else{
this.prams.current++;
}
this.getAllWoTask();
},
onSearch(val) {
this.totalNum=0;
this.prams.current=1;
if(val===''){
this.isSearch=false;
}else{
this.isSearch=true;
}
this.onLoad();
// this.getAllWoTask();
},
onRefresh() {
// 清空列表数据
this.finished = false;
this.refreshing=true;
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.totalNum=0;
this.prams.current=1;
this.onLoad();
},
clear(){
this.serachValue='';
}
}
}
</script>
<style lang="less" scoped>
.mes_woTask{
.serach{
}
.list{
.total{
height: 30px;
line-height: 30px;
margin-left: 12px;
}
.totalItem{
height: 65px;
line-height: 65px;
border-bottom: 1px solid #999;
margin-top: 10px;
padding: 10px;
.link{
height: 25px;
line-height: 25px;
color: #999;
position: absolute;
.left{
float: left;
.fonts{
font-size: 20px;
font-weight:bold;
}
}
.right{
float: right;
margin-left: 90px;
}
}
}
}
}
</style>
2>最终效果图:
image.png
总结
1.如果loading为true,onLoad()方法不会执行。反之onLoad()方法会执行。
2.onLoad()方法加载数据时，第一次加载完后(有分页)，设置loading改false才会出发下一次的事件执行
3.初始化数据list时,会默认执行onLoad方法。解决此问题，通过immediate-check属性解决。
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:immediate-check="false" //默认第一次加载数据时不执行 onLoad()方法
>
</van-list>
- offset 属性值，
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:immediate-check="false"
:offset="70" // 滚动条距离底部70得时候才会执行onLoad() 事件
>
</van-list>
5.注意下拉刷新数据的处理，以及搜索框输入值再下拉数据的处理。希望此教程可以帮助到你们。❤❤❤
