vue-app之h5app列表组件封装

柔情只为你懂 2023-02-23 12:19 9阅读 0赞

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

*  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>

[Vant-ui]: https://youzan.github.io/vant/#/zh-CN/list