vue-app之h5app列表组件封装

这个组件是基于H5app的移动端列表组件。
UI组件：Vant-ui
框架：Vue
在移动端存在很多列表，所以就封装了list列表组件，在实际项目中很多特殊情况，使用vant的list组件还是有很多bug，就在vant-ui的list组件上再进行了一些特殊处理。

• list组件

<template>
  <div class="base-list">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
    >
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多数据啦"
            @load="onLoad"
        >
            <slot>
                <van-cell-group>
                    <van-cell v-for="(item, index) in tableList" :key="index">
                        <slot name="content" :item="item"></slot>
                    </van-cell>
                </van-cell-group>
            </slot>
        </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>

export default {
    props: {
        tableList: {
            type: Array,
            default() {
                return [];
            }
        },
    },
    data(){
        return{
            // isRefresh:true,
            // isLoading:false,
            // loading:false,
            // finished:false,
            loading: false,
            finished: false,
            refreshing: false,

        }
    },
    methods:{
        //刷新数据
        onRefresh(){
            let that = this;
            this.loading = true;
            this.finished = false;
            this.$emit("onRefresh", function success( size,total = 5, page = {}) {
                page.SkipCount = size;
                that.loading = false;
                if (size >= total ) {
                    that.finished = true;
                }
            });
        },
        //加载数据
        onLoad(){
            let that = this;
            this.$emit("onLoad", function success(size, total = 5, page = {}) {
                page.SkipCount = size; //将上一个请求的列表长度赋值给SkipCount ，下次请求就可以跳过已请求的数据
                that.loading = false;//关闭loading 状态
                if (size >= total ) {//如果列表的长度大于或等于totalCount数据的总长度则显示加载完毕的字样
                    that.finished = true;
                }
            });
        }
    }
}
</script>

<style lang="less">
    .van-cell-group{
        padding: 0 4px;
        .van-cell{
            border: 1px solid rgb(236, 236, 236);
            border-radius: 8px;
            margin: 4px 0px;
        }
    }
</style>

• 页面调用该组件

<template>
  <base-list
      :tableList="tableList"
      ref="baseList"
      @onLoad="getList"
      @onRefresh="getList_refresh"
    >
    <div class="slot_content " slot-scope="scope" slot="content">
    	//中间就可以写成你自己列表的样子，取数据就是：scope.item.你的字段
    	//比如
    	<p> <span>防火单位：</span>{{scope.item.fireUnitName}}</p>
    </div>
    </base-list>
 </template>
 
 <script>
data(){
	retrun{
		tableList:[],
      	page:{//在里的是请求列表的参数，只是把它放在了一个对象里，根据自己实际的请求参数配置
          AreaId:this.$store.state.userInfo.areaId,
          FireUnitName:'',
          DeviceState:'',
      },
	}
},
//获取列表
 getList(success){
      let x = arguments[0] instanceof Object;  //这里的x是list组件事件返回的function
      let p = this.page;
      if (!x) {//如果x不存在说明不是上滑请求列表的事件，可能是当前页面其他请求列表的事件（比如按钮的筛选或者模糊查询）就需要重新配置page的参数值，从第一条开始加载
          p.SkipCount = 0;
          this.tableList = [];
          this.$refs.baseList.loading = true
          this.$refs.baseList.finished = false
      }
      this.$axios.get(this.$api.GetAreaElectricDeviceList, { params: p}).then(res=>{
          console.log("列表",res)
          if (res.result.items.length > 0) {
            this.tableList = this.tableList.concat(res.result.items);
          }
	//此处也是判断是否是上滑加载列表的事件，如果是则调用success对象传入相对应的参数值，就会在list组件中就会按照对应的处理，如果不是就是该页面的其他请求事件则再定义一个和list组件中差不多的方法来修改page的参数和控制列表的状态
          x ? success(this.tableList.length, res.result.totalCount, p) : this.changelist(this.tableList.length, res.result.totalCount, p);
      })
    },
changelist(size, total = 5, page = {}){
        page.SkipCount = size; //将上一个请求的列表长度赋值给SkipCount ，下次请求就可以跳过已请求的数据
        this.$refs.baseList.loading = false;//加载状态关闭
        if (size >= total ) {//如果列表的长度大于或等于totalCount数据的总长度则显示加载完毕的字样
            this.$refs.baseList.finished = true;
        }
    },
//下拉刷新
getList_refresh(success){
      let p = this.page;
      if (this.$refs.baseList.refreshing) {//如果触发下拉刷新则从第一条开是请求，清空之前的tableList 
        this.page.SkipCount = 0
        this.tableList = [];
        this.$refs.baseList.refreshing = false;
      }
      this.$axios.get(this.$api.GetAreaElectricDeviceList, { params: p}).then(res=>{
          console.log("列表",res)
          if (res.result.items.length > 0) {
            this.tableList = this.tableList.concat(res.result.items);
          }
          success(this.tableList.length, res.result.totalCount, p)//然后就把刷新请求的数据传给list组件里的方法改变下次请求的SkipCount 
      })
    },
 </script>