vue中的mescroll搜索运用及各种填坑处理

background: #121223;
ul{
height:auto;
.item{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
height:1.56rem;
.personBlock{
display:flex;
justify-content: flex-start;
align-items: center;
.showImg{
position:relative;
width:1rem;
height:1rem;
margin-right:.16rem;
border:.02rem solid #51516D;
border-radius:50%;
box-sizing: border-box;
img{width:100%;height:100%;border-radius:50%}
.icon{
position: absolute;
bottom:0;
right:0;
width:.28rem;
height:.28rem;
background-image:url();
background-repeat:no-repeat;
background-size:contain;
&.c_company{background-image:url(../../images/c_company.png);}
&.c_person{background-image:url(../../images/c_person.png);}
&.c_kol{background-image:url(../../images/kol.png);}
}
}
.showInfo{
.name{font-size:.3rem;color:#fff;font-weight:500;line-height:.42rem;text-align:left;}
.attentionCount{font-size:.26rem;font-weight:400;color:#716D80;text-align:left;}
}
}

.sendBtn{
width:1.44rem;
height:.56rem;
line-height:.56rem;
background:#FF005E;
border-radius:.28rem;
color:#fff;
text-align:center;
&.active{background:#2C2B41;color:#fff}
}
}
}
}

</style>

填坑处理：

1、用户未输入搜索关键词时，mescroll不能就直接初始话，要在用户输入的时候才能初始化，所以子组件就接受了父组件的keyword，并用

v-if="keyword !== ''"

来判断加载子组件的条件，然后子组件通过监听keyword的变化，重置mescroll：如下：

watch: {
    'searchName' () {
      this.dataList = [];//要清空，不然有时候会出现上拉加载不了
      this.searchName !== '' && this.mescroll.resetUpScroll();
    }
  },

　　2、搜索完以后点击搜索输入框右边里的关闭按钮，发现其他列表不能滑动。解决方法：要加：isBounce: true,

ps：下面看下mescroll vue使用

github: https://github.com/mescroll/mescroll

官方文档：http://www.mescroll.com

最好按照官方文档来

开启初始化完毕之后自动执行上拉加载的回调，保证一进入页面，就去加载数据

上拉刷新的时候，或者tab切换的时候，先将数据置空