使用vant实现简单list

1)注册list组件

import Vue from \’vue\’;
import {List} from \’vant\’;
Vue.use(List);

2)使用list结构

//主要分为两块，一是外壳的代码块，可固定以及里面的内容区。二是赋初始值属性值。
<va n-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.注意下拉刷新数据的处理，以及搜索框输入值再下拉数据的处理。希望此教程可以帮助到你们。???

作者：xiaoqingnian_
链接：https://www.jianshu.com/p/67a919b15f43
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

使用vant实现简单list

1)注册list组件

2)使用list结构

3)模拟业务逻辑,编写代码

1>以一个接口为准，获取所有得工单任务信息。编写中间内容区的数据，vant list编写内容

2>添加获取得数据集 list

3>遍历该list

4>添加样式(不是专业前端，随便写得望谅解，有更好得排版可提供也学习下)

5>效果图如下:

4)继续实现加载更多数据

1>在onLoad() 事件中编写业务代码，这一步是实现了所有功能，包含下拉刷新以及搜索框信息，有不同的小伙伴们，可以指出，后续加上更新讲解

总结

相关文章

左子网

1)注册list组件

2)使用list结构

3)模拟业务逻辑,编写代码

1>以一个接口为准，获取所有得工单任务信息。编写中间内容区的数据，vant list编写内容

2>添加获取得数据集 list

3>遍历该list

4>添加样式(不是专业前端，随便写得望谅解，有更好得排版可提供也学习下)

5>效果图如下:

4)继续实现加载更多数据

1>在onLoad() 事件中编写业务代码，这一步是实现了所有功能，包含下拉刷新以及搜索框信息，有不同的小伙伴们，可以指出，后续加上更新讲解

总结

相关文章

微信

左子网

QQ交流群