使用vant实现简单list

作者： xiaoqingnian_ 时间：2023-11-08 阅读数：194 人阅读

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>