移动端 vant 踩坑记

1、使用 van-popup 组件时实现点击灰色蒙层关闭弹层时报错

报错：vue.esm.js:629 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “isShow”
大概意思是：避免直接改变属性，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于属性值的数据或计算属性。通过 props 传递给子组件的 isShow，不能在子组件内部修改 props 中的 isShow 值。

在使用时需要这样做：

// 父组件中
<template lang='pug'>
  customPopup(:isShow.sync='isShow')
</template>

// 子组件中
<template lang='pug'>
  van-popup.custom-popup(
    v-model='isShow'
    position='bottom'
    :round="true"
    :closeOnClickOverlay='false'
    @click-overlay='closeCustomPop'
  )
</template>
<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      closeCustomPop () {
        this.$emit('update:isShow', false)
      }
    }
  }
</script>

必须要将 closeOnClickOverlay 和 click-overlay 配合使用，就不会有这个报错了。

popUp 在iOS上弹出时，会闪一下，丢失背景色透出下层的灰色透明蒙层问题

  /deep/ .van-overlay {
    z-index: 10 !important;
  }
  /deep/.van-popup {
    z-index: 11 !important;
  }

2、PullRefresh 下拉刷新踩坑

PullRefresh 的内容未填满屏幕时，只有一部分区域可以下拉：

  /deep/ .my-list-loadmore {
    .van-pull-refresh {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: unset; // 可选，这个视情况添加
      .van-pull-refresh__track {
        flex: 1;
      }
    }
  }