2021年49周周记

这周主要是完成移动端h5部分页面和功能的开发。表单，地图，列表等部分的实现。

1 学习内容

1.1 列表

列表的功能是能够实现上拉加载更多数据，下拉刷新，同时每一个卡片有一个点击事件。

1.1.1 实现

列表的主要部分是调用的cube-ui 的 cube-scroll 组件。使用参考cube-scroll 的例子 以及better-scroll官网。如下

<cube-scroll
        ref="scroll"
        :data="riskList"
        :options="options"
        @pulling-down="onPullingDown"
        @pulling-up="onPullingUp"
      >
        <div class="cards-list">
          <div class="card-wrapper" v-for="(item, idx) in list" :key="'' + idx + risk">
            <el-card class="box-card">
              <div slot="header" class="card-header" @click="handleClick">
                header
              </div>
              <div class="card-content">
              content
              </div>
            </el-card>
          </div>
        </div>
        <template slot="pullup" slot-scope="props">
          <div v-if="props.pullUpLoad" class="pullup-wrapper">
            <div v-show="!props.isPullUpLoad" class="not-trigger">
              <span
                v-show="!riskTotal || riskList.length < riskTotal"
                class="pullup-loaded"
                style="color: purple"
                >上拉加载更多数据 ^_-</span
              >
              <span
                v-show="riskTotal && riskList.length >= riskTotal"
                class="pullup-loaded"
                style="color: black"
                >已加载全部数据 ^_^</span
              >
            </div>
            <div class="trigger" v-show="props.isPullUpLoad">
              <span class="pullup-loading" style="color: yellow">正在加载</span>
            </div>
          </div>
        </template>
      </cube-scroll>

options = {
      // 不阻止点击事件
      // click: true,
      // 滚动条
      scrollbar: {
        fade: true, // 停止滚动时隐藏
        interactive: false, // 交互
      },
      // 下拉刷新
      pullDownRefresh: {
        threshhold: 50, // 触发的下拉距离
        stop: 20, // 会谈后停留的距离
        txt: '刷新中', // 提示文本
      },
      // 上拉加载新数据
      pullUpLoad: {
        threshhold: 50,
        // txt: {
        //   more: '正在加载数据',
        //   noMore: '到底了',
        // },
      },
    };
    // 正在下拉
    async onPullingDown() {
      this.loading = true;
      // 刷新
      // 清空当前列表
      this.list.splice(0, this.list.length);
      // 请求数据
      let res = await this.postList();
      this.loading = false;
      this.$refs.scroll.forceUpdate(); // 不管有没有成功 都强制刷新
      this.$refs.scroll.refresh();
    },
    // 正在上拉
    async onPullingUp() {
      // 延迟6000 ms 观看底部上拉提示语
      let sleep = () =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 6000);
        });
      // await sleep();
      this.loading = true;
      // 加载更多数据 配合后端的分页查询
      let res = await this.postList();
      this.loading = false;
      this.$refs.scroll.forceUpdate(); // 不管有没有成功 都强制刷新
    },
    handleClick(){
      console.log('click');
    }

1.1.2 问题

描述: 碰到的问题是点击事件没有响应。对div.card-wrapper的结点监听点击事件，不能响应。对el-card.box-card监听点击事件，不能响应。对div.card-header监听点击事件能响应。对div.card-content监听点击事件不能响应。
排查: 网页右键检查元素，可以定位到各个结点。
结果: 目前还没找到原因。

1.2 表单

表单实现的功能就是能够上拉下拉内容。

1.2.1 实现

实现是复用别人的。思路是用用两个el-table。第一个仅仅用来设置表头，第二个是外面套个cube-scroll用来展示内容。

1.2.2 问题

描述：一共有四列，指定了三列的宽后，表格的内容溢出。
排查：检查表格父结点以及其子子结点的宽度。div.el-table_header-wrapper的宽度超过的其父结点，异常。
结果：通过查阅element-ui的源码，是由于layout计算列宽时默认不定宽度的列宽最少为80，当留下的可用空间不足时，就会溢出。

1.3 地图

地图实现的功能是在各个位置显示标记，而且有聚合功能。能够选中每个坐标的方圆n公里的区域。

1.3.1 实现

地图是使用的mapbox-gljs。聚合功能的实现是套用了官网的例子。点选功能，是通过对特点图层的显隐控制以及对地图实例的点击事件监听实现。

1.3.2 问题

描述：有时候能看到标记，有时候不能标记。
排查：检查地图数据的更新输出，和数据加载的输出。
结果：由于数据和地图的加载都是异步的，先后不可控。监听数据的变化，数据改变时，更新地图数据。当地图加载完时也更新数据。

2 补充

再补充一点其他杂七杂八的问题（问题真的好多…）

2.1 页面刷新结果异常

当刷新页面，页面的结果并不是跳转来的样子。代码里是使用$router.push做的跳转
，布尔值和对象都能够正确的传递。但是当重新的刷新页面，布尔值(如false)会被当成字符串(‘false’)，这样就一直是真了。对象消失了。教训就是，如果没有必要，不传对象和布尔值，尽量传Nuber或String。

2.2 Promise.all

promise.all的参数应该是异步对象数组，当结合map函数使用，像这个样子promise.all(array.map(...));应当确保map返回的每一个对象都是异步对象。可以这个样子promise.all(array.map(e=>{let func = async (e)=>{...};return func()})).