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

父组件处理：

 @import "search";

子组件处理：

.mescroll {
  position: fixed;
  top: .9rem;
  bottom: 0;
  left:0;
  height: auto;
}
.search-content{
  padding:0 .24rem; 
  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}
      }
    }
  }
}  

填坑处理：

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切换的时候，先将数据置空

page 和 pageSize使用upOption中的，并且num默认为0

代码：

// html


//data:
// 下拉刷新的常用配置
downOption: {
 use: true, // 是否启用下拉刷新; 默认true
 auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
},
// 上拉加载的常用配置
upOption: {
 use: true, // 是否启用上拉加载; 默认true
 auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
 textNoMore:'我是有底线的 >_<',
 page: {
 num:0,
 size: 4
 }
},
list:[],

//methods:
// 下拉回调
downCallback(mescroll){
 mescroll.setPageNum(1)
 this.list = []
 mescroll.resetUpScroll(); 
 setTimeout(()=>{
 console.log(666);
 // 隐藏下拉加载状态
 mescroll.endErr()
 },1000)
},
// 上拉回调
upCallback(mescroll){
 setTimeout(()=>{
 let pageNum = mescroll.num == 0 ? 1: mescroll.num; // 页码, 默认从1开始
 let pageSize = mescroll.size;
 this.getPageList(pageNum, pageSize).then((res)=>{
  mescroll.endSuccess(res)
 })
 },1000)
}

总结

以上所述是小编给大家介绍的vue中的mescroll搜索运用及各种填坑处理,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！