当前位置 : 主页 > 编程语言 > 其它开发 >

前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)

来源:互联网 收集:自由互联 发布时间:2022-05-18
| 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作。进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单

| 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作。进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过vant组件,里面充满了过多的重复代码,在有bug或者有需求变更的时候,每次的改动都要对很多个相同逻辑的页面组件进行修改,于是花了一点时间,将其进行封装,发现还是节省了很多的时间。自己做一个记录。

前端提升生产力系列文章

1.前端提升生产力系列一(vue3 element-plus 配置json快速生成form表单组件)

2.前端提升生产力系列二(vue3 element-plus 配置json快速生成table列表组件)

3.前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)

本文涉及所有源代码已上传 https://github.com/aehyok/vue-qiankun

1、实现功能的讲解

先说一下实现的功能

  • 1、模拟了一个api请求,用于请求接口数据的,并将请求设置为5秒后数据请求成功(效果明显一点)
  • 2、定义请求接口的页码相关参数,以及控制逻辑
  • 3、下拉刷新第一页数据,并且在刷新过程中,不能再进行下拉刷新
  • 4、上拉加载下一页数据,并且在加载过程中,不能再进行上拉加载
  • 5、加载到最后一页,则最末端会显示【数据已加载完毕】
  • 6、如果请求api一开始就没有数据,则显示成一个默认图片(代表没有加载到数据)
2、实现效果的演示

动画.gif

3、没有封装前的代码逻辑(内附注释)
  <template>
    <van-pull-refresh
      v-model="isRefresh"
      @refresh="refreshClick"
      loading-text="正在请求数据"
      success-text="数据刷新成功"
    >
      <van-list
        v-model:loading="isListLoading"
        :finished="isFinished"
        :offset="state.offset"
        finished-text="数据已加载完毕"
        :immediate-check="false"
        @load="onLoad"
      >
      <div class="main">
        <div class="flex" v-for="item in dataList" :key="item.id">
          <div :class="!item.url ? 'itemCollagen' : 'itemCollagenSeventy'">
              <p>{{ item.messageName }}</p>
              <span
              ><span :class="item.createdByDeptName ? 'createdByDeptName' : ''">{{
                  item.createdByDeptName ? item.createdByDeptName : ''
              }}</span
              >{{ item.createdAt }}</span
              >
          </div>
          <div v-if="item.url">
              <img :src="item.url" alt="" />
          </div>
          </div>
      </div>
      </van-list>
    </van-pull-refresh>
    <div v-if="state.nodata===true"><van-empty description="没有数据"  /></div>
    
  </template>
  <script setup>
    import { PullRefresh as VanPullRefresh, List as VanList, Empty as VanEmpty } from 'vant';
    import { onBeforeMount, ref, reactive, watch } from 'vue';
    
    const setTotal = 51  // 设置列表总记录数
    let dbList = []  // 通过循环向数组插入测试数据
    for(let i= 0; i< setTotal; i++) {
        dbList.push({
          id: i + 1,
          messageName: '长图片'+(i+1),
          createdAt: '2021-07-27 17:06:19',
          createdByDeptName: '百色',
          url: 'http://vue.tuokecat.com/cdn/h5/newslist.jpg',
        })
    } 
    const successText = ref('正在请求数据')
    const dataList = ref([]);
    const pageModel = reactive({
      page: 1,
      limit: 15,
      total: 0,
      pages: 0,
    });

    const sleep = (time) => {
      return new Promise(resolve => setTimeout(resolve, time))
    }
      /**
      * 模拟通过api获取第几页的数据
      * @param {每页多少条记录} limit 
      * @param {第几页} page 
      */
    const getListApi = async(limit, page) => {
      let start = limit * (page - 1);
      let end = limit * page;
      let tempList = dbList.slice(start, end);
      console.log(pageModel,tempList, `获取第${page}页数据列表`);
      const result = {
          code: 200,
          message: 'success',
          data: {
              docs: tempList,
              page: page,
              limit: limit,
              total: setTotal,
              pages: Math.ceil(setTotal / 15)
          }
      }
      await sleep(5000)
      return new Promise(resolve => resolve(result))
    };

    const state = {
      offset: 6, // 滚动条与底部距离小于 offset 时触发load事件
      nodata: false,
    };

    // 控制下拉刷新的状态,如果为true则会显示,则为一直处于加载中,到请求接口成功手动设置false,则代表刷新成功
    const isRefresh = ref(false);

    // 可以判断如果是上拉加载的最后一页的时候,加载成功设置为true,再上拉则不会进行加载了
    const isFinished = ref(false);

  // 是否在加载过程中,如果是true则不会继续出发onload事件
    const isListLoading = ref(false);  

    onBeforeMount(() => {
      getList()
    });

    // 下拉刷新列表
    const refreshClick = () => {
      isRefresh.value = true;
      isFinished.value = false;
      isListLoading.value = true;
      // 通过接口调用数据
      console.log('调用接口成功,并重置页码为1');
      successText.value="正在加载数据"
      pageModel.page = 1;
      getList()
    };

      //上拉加载下一页
    const onLoad = () => {
      // 判断当前页码+1 是否大于总页数
      // 大于总页数,结束加载,反之继续请求
      isListLoading.value = true
      if (pageModel.page + 1 > pageModel.pages) {
        isFinished.value = true
        isListLoading.value = false
        console.warn('数据页面已超出最大页,不能再进行请求了')
        return;
      } else {
        pageModel.page = pageModel.page + 1;
        getList()
      }
    };


    const getList = () => {
      getListApi(pageModel.limit,pageModel.page).then(result => {
          console.log(result, 'ssssssssssssss')
          successText.value="1111111111"
          let tempList = result.data.docs
          pageModel.pages = result.data.pages
          pageModel.total = result.data.total
          isListLoading.value = false
          isRefresh.value = false
          if (pageModel.page === 1) {
              dataList.value = tempList
          } else {
              dataList.value=[...dataList.value, ...tempList]
          }
      })
    };

    watch(()=> pageModel.total, (newValue, oldValue) => {
          console.log('watch', newValue> 0, oldValue)
          state.nodata = !(newValue > 0)
    })
  </script>
4、封装后直接调用的全部代码片段

可以发现如果每个列表都去做上述主要的五件事情,就会有很多重复的代码,
先来看一下直接封装后写一个列表有多少代码

    <template>
        <list-view :getListApi="getListApi" v-model:pageModel="pageModel" v-model:dataList="dataList">
          <item-view :dataList="dataList"></item-view>
        </list-view>
    </template>
    <script lang="ts" setup>
      import listView from '../../components/list/index.vue';
      import itemView from './item-view.vue';
      import {reactive, ref } from 'vue';
      import type {PageModel } from '../../types/models/index.d';

      const dataList = ref([]);

      const pageModel = reactive<PageModel>({
        page: 1,
        limit: 15,
        total: 0,
        pages: 0,
      });


    const setTotal = 51  // 设置列表总记录数
    let dbList: any= []  // 通过循环向数组插入测试数据
    for (let i = 0; i < setTotal; i++) {
        dbList.push({
            id: i + 1,
            messageName: '长图片' + (i + 1),
            createdAt: '2021-07-27 17:06:19',
            createdByDeptName: '百色',
            url: 'http://vue.tuokecat.com/cdn/h5/newslist.jpg',
        })
    }

    /**
    * 模拟通过api获取第几页的数据
    * @param {每页多少条记录} limit 
    * @param {第几页} page 
    */
    const getListApi = async (limit, page) => {
        let start = limit * (page - 1);
        let end = limit * page;
        let tempList = dbList.slice(start, end);
        console.log(pageModel, tempList, `获取第${page}页数据列表`);
        const result = {
            code: 200,
            message: 'success',
            data: {
                docs: tempList,
                page: page,
                limit: limit,
                total: setTotal,
                pages: Math.ceil(setTotal / 15)
            }
        }

        const sleep = (time) => {
            return new Promise(resolve => setTimeout(resolve, time))
        }

        await sleep(1000)
        return new Promise(resolve => resolve(result))
    };
    </script>
  • 解析以上代码:

    • 1、最重要便是list-view是我们封装的组件,只需要引用即可

    • 2、而item-view则是我们列表中每一项的UI视图布局和样式,相当于抽离出来了。跟原来一模一样

    • 3、主要是准备模拟api请求多了不少代码

    • 4、声明变量和一些定义

  • 封装的理念

    • 1、将尽可能通用的代码,抽离出来,不用再进行复制粘贴的操作
    • 2、修改维护逻辑时只需要修改一个地方即可,无需每个列表都要修改
    • 3、每次写出来的列表bug少,效率高
5、组件封装的代码
  <template>
    <van-pull-refresh
      v-model="isRefresh"
      @refresh="refreshClick"
      :loading-text="'正在请求数据'"
      success-text="数据刷新成功"
    >
      <van-list
        v-model:loading="isListLoading"
        :finished="isFinished"
        :offset="state.offset"
        finished-text="数据已加载完毕"
        :immediate-check="false"
        @load="onLoad"
      >
        <slot></slot>
      </van-list>
    </van-pull-refresh>
    <div v-if="state.nodata === true">
      <van-empty description="没有数据" />
    </div>
  </template>
  <script lang="ts" setup>
  import { PullRefresh as VanPullRefresh, List as VanList, Empty as VanEmpty } from 'vant';
  import { onBeforeMount, ref, PropType, watch } from 'vue';
  import { PageModel } from '/@/types/models';
  const emits = defineEmits(['getList', 'update:pageModel', 'update:dataList']);
  const props = defineProps({
    pageModel: {
      type: Object as PropType<PageModel>,
      default: () => { },
    },
    dataList: {
      type: [Array],
      default: () => []
    },
    getListApi: {
      type: Function,
      default: () => { }
    }
  });

  const state = {
    offset: 6, // 滚动条与底部距离小于 offset 时触发load事件
    nodata: false,
  };

  // 控制下拉刷新的状态,如果为true则会显示,则为一直处于加载中,到请求接口成功手动设置false,则代表刷新成功
  const isRefresh = ref(false);

  // 可以判断如果是上拉加载的最后一页的时候,加载成功设置为true,再上拉则不会进行加载了
  const isFinished = ref(false);

  // 是否在加载过程中,如果是true则不会继续出发onload事件
  const isListLoading = ref(false);

  onBeforeMount(() => {
    // emits('getList');
    console.log('getList')
    getList()
  });

  const refreshClick = () => {
    isRefresh.value = false;
    isFinished.value = false;
    isListLoading.value = true;
    // 通过接口调用数据
    console.log('调用接口成功');
    props.pageModel.page = 1;
    emits('update:pageModel', props.pageModel)
    // emits('getList');
    getList()
  };

  const onLoad = () => {
    isListLoading.value = true
    if (props.pageModel.page + 1 > props.pageModel.pages) {
      isFinished.value = true
      isListLoading.value = false
      console.warn('数据页面已超出最大页,不能再进行请求了')
      return;
    } else {
      props.pageModel.page = props.pageModel.page + 1;
    }
    emits('update:pageModel', props.pageModel)
    // emits('getList');
    getList()
  };
  const dataList: any = ref([]);
  const getList = () => {
    props.getListApi(props.pageModel.limit, props.pageModel.page).then((result: any) => {
      console.log(result, 'ssssssssssssss')
      let tempList: [] = result.data.docs
      props.pageModel.limit = result.data.limit
      props.pageModel.page = result.data.page
      props.pageModel.pages = result.data.pages
      props.pageModel.total = result.data.total
      isListLoading.value = false
      isRefresh.value = false
      if (props.pageModel.page === 1) {
        dataList.value = tempList
      } else {
        dataList.value = [...props.dataList, ...tempList]
      }
      emits('update:dataList', dataList.value)
      emits('update:pageModel', props.pageModel)
    })
  };

  // 判断是否有数据
  watch(() => props.pageModel.total, (newValue, oldValue) => {
    console.log('watch', newValue > 0, oldValue)
    state.nodata = !(newValue > 0)
  })
  </script>
  • 解析封装的代码
    • 1、通过watch 监测tatal,判断是否有数据,来确定是否要显示没有数据时的默认图片
    • 2、将请求通过props进行传递,在封装的组件中进行统一处理,当然这里就要要求使用组件的接口要统一参数
    • 3、请求数据后要将数据列表和分页数据通过emits进行回传父组件,用于显示列表数据
    • 4、下拉刷新判断仍然存在统一封装
    • 5、上拉加载列表数据判断仍热存在统一封装
    • 6、最后一次加载数据进行判断处理
    • 7、TypeScript用的还不够熟练,数据列表这一块的封装还不到位,争取有时间再进行深入一下。
总结
  • 实际使用过程中还可以继续优化很多的细节工作,比如有些列表一次性加载即可,不需要进行下拉刷新或者上拉加载的功能,都可以通过传递参数进行控制等等。
  • 封装的过程就是对那些重复性的工作进行提炼,提高代码的复用性,减少代码的拷贝粘贴,这样调用组件后的代码也方便维护和测试工作,相对来说稳定性也更加强劲。

https://github.com/aehyok/vue-qiankun/vite-vue+react+demo/vite-h5/src/views/news-list/
本文中涉及到的代码链接,其中的news-before是没有封装的代码,news-after则是封装后的代码。

https://github.com/aehyok/2022
最后自己每天工作中的笔记记录仓库,主要以文章链接和问题处理方案为主。

上一篇:vue2项目,踩坑Jest单元测试
下一篇:没有了
网友评论