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;