</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)
