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

父组件处理：

 <template>
        <div class="wrap">
             <!-- 搜索框 -->
             <div class="searchInputArea">
                 <div class="searchBarBox">
                     <div class="inputWrap" >
                         <form onsubmit="javascript:return false" action>
                             <input :placeholder = "placeholderStr" type="search" ref = "input" v-model="keyword"  />
                             <span class="clearBtn" v-show="keyword" @click="clear"></span>
                         </form>
                     </div>
                 </div>
             </div>
             <div class="myFastChoiceBlock" v-show="!keyword">
                 <!-- 最近伙伴和我的关注 -->
                 <fast-choice :successInvite="successInvite" @invite="inviteClick"></fast-choice>
             </div>
             <div class="searchContainer">
                 <search-content :searchName="keyword" :successInvite="successInvite" @inviteClick="inviteClick" v-if="keyword !== ''"></search-content>
             </div>
              <!-- 协议弹出层 -->
             <pop-up @change="closeLayer" v-if="popuShow">
                 <h2 class="title">{{protocolTitle}}</h2>
                 <div class="content" v-html="protocolCon"></div>
                 <div class="confirmBtn" :class="{active:isActive}"  @click="confirmProtocol">{{btntxt}}</div>
                 <div class="popCloseCon" @click="closeActionClick"></div>
             </pop-up>
             <!-- 比例弹出层 -->
             <scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn"  :scaleDesc="scaleDesc"  v-show="isScale" :userId="userId"></scale>
        </div>
 </template>

 <script>
     import FastChoice from './components/fastChoice';
     import PopUp from './components/PopUp';
     import scale from './components/scale';
     import SearchContent from './components/searchContent';
     const pageSize=10;
     let t='';
     export default {
         name: "Search",
         data() {
             return {
                  placeholderStr: '搜一搜你想找的TA',
                  keyword: '',
                  list: [],
                  timerKey: null,
                  dataList:[],//列表数据
                  totalPage:1,
                  popuShow:false,//协议弹出层
                  isScale:false,//比例弹出层
                  scaleValue:'',//分成比例
                  userId:'',
                  isActive:true,//操作协议按钮灰色显示
                  sencond:5,//秒数
                  btntxt:'',  //操作协议层按钮文字显示
                  scaleValue:'',//分成比例
                  scaleDesc:'',//比例弹窗描述
                  scaleBtn:'',
                  scaleCount:'50%',//默认分成比例
                  successInvite: [],//默认未邀请
                  protocolTitle:'',//协议标题
                  protocolCon:'' //协议内容
             };
         },
         components:{FastChoice,PopUp,scale, SearchContent},
         watch: {
             keyword () {
                 if (!this.keyword){
                     return;
                 }
             }
         },
         mounted() {
            this.protocolAjax();
         },
         methods: {
             //邀请
             inviteClick (item) {
               //点击邀请过的不予操作
               if(this.successInvite.indexOf(item.hwUserId) > -1 || item.inviteStatus){
                  return;
               }
               this.isScale = true;
               this.userId = item.hwUserId;
               this.scaleDesc = '邀请成功后你可获取该用户部分收益，选择双方都认可的分成比例可以提高邀请成功率哦~';
               this.scaleBtn = '发送邀请';
               this.scaleCount = '50%';//邀请比例统一为50%
             },
             //点击发送邀请
             sendAjaxClick (value){
                 this.scaleValue = value;
                 this.popuShow = true;
                 this.isScale = false;
                 this.isActive = true;
                 this.sencond = 5 ;
                 this.timer();
             },
             //5s时间倒计时
             timer() {
                 if (this.sencond > 0) {
                     this.btntxt="已阅读同意并确认邀请("+this.sencond+"s)";
                     this.sencond--;
                     t=setTimeout(this.timer, 1000);
                 } else{
                     this.isActive = false;
                     this.sencond = 5;
                     this.btntxt="已阅读同意并确认邀请";
                 }
             },
             //已阅读同意并确认
             confirmProtocol () {
                 if(this.isActive){
                     return false;
                 }
                 this.sendAjax();
             },
             //发送邀请请求
             sendAjax () {
                 console.log(this.scaleValue);
                 let dd = this.scaleValue.toString();
                 this.$request.post(_basePath + '/activity/page20191018/inviteArtist.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => {
                     this.successInvite.push(this.userId) ;
                     mui.toast("已发送邀请，对方接受后会通知你哦",2000);
                     this.closeActionClick();
                 }).catch(() => {})
             },
             //关闭操作协议弹窗
             closeActionClick() {
                 this.popuShow = false;
                 clearTimeout(t);//清除倒计时
             },
              //关闭分成比例弹窗
             closeScale () {
                this.isScale = false;
             },
             clear () {
                 this.keyword = "";
                 this.$refs["input"].focus();
             },
             protocolAjax () {
                  this.$request.post(_basePath + '/activity/page20191018/queryProtocol.html',{type:0}).then((res) => {
                  this.protocolTitle = res.title;
                  this.protocolCon = res.content;
                 }).catch(() => {})
             }
         },
     };
 </script>

 <style lang="scss" scoped>
  @import "search";
 </style>

子组件处理：

 <template>
     <div>
         <div ref="mescroll" class="mescroll">
             <div class="search-content wrapper" ref="scroller" >
                 <ul>
                     <li class="item"  v-for="(item,index) in dataList" :key="index">
                         <div class="personBlock" @click="openUserClick(item.userDetail.userId)">
                             <div class="showImg">
                                 <img :src="item.userDetail.userThumUrl" />
                                 <template  v-if="item.userDetail.kolFlag">
                                     <em v-if="item.userDetail.kolFlag" class="icon c_kol"></em>
                                 </template>
                                 <template  v-else>
                                     <em class="icon c_company" v-if="item.userDetail.upSignType == '1'"></em>
                                     <em class="icon c_person" v-if="item.userDetail.upSignType == '0'"></em>
                                 </template>

                             </div>
                             <div class="showInfo">
                                 <div class="name">{{item.userDetail.nickName}}</div>
                                 <div class="attentionCount">
                                     {{item.userDetail.fansCount || 0}}人关注TA
                                 </div>
                             </div>
                         </div>
                         <div class="sendBtn" :class="{active:item.userDetail.inviteStatus || (successInvite.indexOf(item.userDetail.hwUserId) > -1 ) }"  @click="inviteClick(item.userDetail)">
                             <span v-if="item.userDetail.inviteStatus || successInvite.indexOf(item.userDetail.hwUserId) > -1">已邀请</span>
                             <span v-else>邀请</span>
                         </div>
                     </li>
                 </ul> 

             </div>
         </div>
         <empty v-show="isEmpty">
             <p class="note">纳尼，竟然找不到这个人…</p>
         </empty>
     </div>
 </template>

 <script>
 import MeScroll from 'mescroll.js';
 import 'mescroll.js/mescroll.min.css';
 import Empty from './empty';
  const pageSize=10;
 export default {
     name: 'SearchContent',
     props: {
         searchName: {
             type: String,
             default: ''
         },
         successInvite: {
             type: Array,
             default: []
         }
     },
     data() {
         return {
             dataList: [],
             mescroll: null, //mescroll实例对象
             totalPage:1,
             isEmpty:false
         }
     },
     components:{
        Empty
     },
     watch: {
         'searchName' () {
             this.dataList = [];//要清空，不然有时候会出现上拉加载不了
             this.searchName !== '' && this.mescroll.resetUpScroll();
         }
     },
     mounted () {
         console.log(this.searchName)
         this.mescroll = new MeScroll(this.$refs.mescroll, { //在mounted初始化mescroll,确保此处配置的ref有值
             down:{isLock: true}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则down可不用写了)
             up: {
                     callback: this.upCallback,
                     // 以下是一些常用的配置,当然不写也可以的.
                     page: {
                         num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                         size: 10, //每页数据条数,默认10
                     },
                     htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在加载中..</p>',
                     htmlNodata: '<p class="upwarp-nodata" style="height:.4rem">当当当~已经到底啦~</p>',
                     noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                     isBounce: true,
             },
             down:{
                 use:false
             },
         });
     },
     methods: {
          //点击调起个人主页
         openUserClick (item) {
             console.log(item)
             var userId = item;
              mui.openClient({"pageType": "userHome","userId":item});
         },
          //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
         upCallback(page) {
             //联网请求
             this.$request.post(_basePath + '/activity/page20191018/searchAll.html', {hintKey:this.searchName,searchType:91,pageNo:page.num,pageSize:page.size,actionSource:'07'}).then((response) => {
                     if(response && response.resultList){
                       // 请求的列表数据
                         let result = response.resultList[0];
                         let arr = result.list;
                         // 如果是第一页需手动置空列表
                         if (page.num === 1) this.dataList = []
                         // 把请求到的数据添加到列表
                         this.dataList = this.dataList.concat(arr)
                         // 数据渲染成功后,隐藏下拉刷新的状态
                         this.totalPage = result.total % pageSize > 0 ? Math.floor(result.total / 10 + 1) : result.total / 10;//计算总页数超过就不loadMore
                         this.$nextTick(() => {
                                 this.mescroll.endSuccess(arr.length);
                                 this.mescroll.endByPage(arr.length, this.totalPage)
                         })
                     }else{
                         this.isEmpty = true;
                         this.mescroll.endErr();
                     }
             }).catch(() => {
                     this.mescroll.endErr();
             })
         },
         inviteClick(item) {
             this.$emit('inviteClick',item);
         }
 }

 }
 </script>

 <style lang="scss" scoped>
 .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}
             }
         }
     }
 }    

 </style>

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

v-if="keyword !== ''"来判断加载子组件的条件，然后子组件通过监听keyword的变化，重置mescroll：如下：

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

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