vue的mescroll搜索运用以及各种填坑处理
父组件处理：
1 <template> 2 <div class="wrap"> 3 <!-- 搜索框 --> 4 <div class="searchInputArea"> 5 <div class="searchBarBox"> 6 <div class="inputWrap" > 7 <form onsubmit="javascript:return false" action> 8 <input :placeholder = "placeholderStr" type="search" ref = "input" v-model="keyword" /> 9 <span class="clearBtn" v-show="keyword" @click="clear"></span> 10 </form> 11 </div> 12 </div> 13 </div> 14 <div class="myFastChoiceBlock" v-show="!keyword"> 15 <!-- 最近伙伴和我的关注 --> 16 <fast-choice :successInvite="successInvite" @invite="inviteClick"></fast-choice> 17 </div> 18 <div class="searchContainer"> 19 <search-content :searchName="keyword" :successInvite="successInvite" @inviteClick="inviteClick" v-if="keyword !== ''"></search-content> 20 </div> 21 <!-- 协议弹出层 --> 22 <pop-up @change="closeLayer" v-if="popuShow"> 23 <h2 class="title">{{protocolTitle}}</h2> 24 <div class="content" v-html="protocolCon"></div> 25 <div class="confirmBtn" :class="{active:isActive}" @click="confirmProtocol">{{btntxt}}</div> 26 <div class="popCloseCon" @click="closeActionClick"></div> 27 </pop-up> 28 <!-- 比例弹出层 --> 29 <scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn" :scaleDesc="scaleDesc" v-show="isScale" :userId="userId"></scale> 30 </div> 31 </template> 32 33 <script> 34 import FastChoice from './components/fastChoice'; 35 import PopUp from './components/PopUp'; 36 import scale from './components/scale'; 37 import SearchContent from './components/searchContent'; 38 const pageSize=10; 39 let t=''; 40 export default { 41 name: "Search", 42 data() { 43 return { 44 placeholderStr: '搜一搜你想找的TA', 45 keyword: '', 46 list: [], 47 timerKey: null, 48 dataList:[],//列表数据 49 totalPage:1, 50 popuShow:false,//协议弹出层 51 isScale:false,//比例弹出层 52 scaleValue:'',//分成比例 53 userId:'', 54 isActive:true,//操作协议按钮灰色显示 55 sencond:5,//秒数 56 btntxt:'', //操作协议层按钮文字显示 57 scaleValue:'',//分成比例 58 scaleDesc:'',//比例弹窗描述 59 scaleBtn:'', 60 scaleCount:'50%',//默认分成比例 61 successInvite: [],//默认未邀请 62 protocolTitle:'',//协议标题 63 protocolCon:'' //协议内容 64 }; 65 }, 66 components:{FastChoice,PopUp,scale, SearchContent}, 67 watch: { 68 keyword () { 69 if (!this.keyword){ 70 return; 71 } 72 } 73 }, 74 mounted() { 75 this.protocolAjax(); 76 }, 77 methods: { 78 //邀请 79 inviteClick (item) { 80 //点击邀请过的不予操作 81 if(this.successInvite.indexOf(item.hwUserId) > -1 || item.inviteStatus){ 82 return; 83 } 84 this.isScale = true; 85 this.userId = item.hwUserId; 86 this.scaleDesc = '邀请成功后你可获取该用户部分收益，选择双方都认可的分成比例可以提高邀请成功率哦~'; 87 this.scaleBtn = '发送邀请'; 88 this.scaleCount = '50%';//邀请比例统一为50% 89 }, 90 //点击发送邀请 91 sendAjaxClick (value){ 92 this.scaleValue = value; 93 this.popuShow = true; 94 this.isScale = false; 95 this.isActive = true; 96 this.sencond = 5 ; 97 this.timer(); 98 }, 99 //5s时间倒计时 100 timer() { 101 if (this.sencond > 0) { 102 this.btntxt="已阅读同意并确认邀请("+this.sencond+"s)"; 103 this.sencond--; 104 t=setTimeout(this.timer, 1000); 105 } else{ 106 this.isActive = false; 107 this.sencond = 5; 108 this.btntxt="已阅读同意并确认邀请"; 109 } 110 }, 111 //已阅读同意并确认 112 confirmProtocol () { 113 if(this.isActive){ 114 return false; 115 } 116 this.sendAjax(); 117 }, 118 //发送邀请请求 119 sendAjax () { 120 console.log(this.scaleValue); 121 let dd = this.scaleValue.toString(); 122 this.$request.post(_basePath + '/activity/page20191018/inviteArtist.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => { 123 this.successInvite.push(this.userId) ; 124 mui.toast("已发送邀请，对方接受后会通知你哦",2000); 125 this.closeActionClick(); 126 }).catch(() => {}) 127 }, 128 //关闭操作协议弹窗 129 closeActionClick() { 130 this.popuShow = false; 131 clearTimeout(t);//清除倒计时 132 }, 133 //关闭分成比例弹窗 134 closeScale () { 135 this.isScale = false; 136 }, 137 clear () { 138 this.keyword = ""; 139 this.$refs["input"].focus(); 140 }, 141 protocolAjax () { 142 this.$request.post(_basePath + '/activity/page20191018/queryProtocol.html',{type:0}).then((res) => { 143 this.protocolTitle = res.title; 144 this.protocolCon = res.content; 145 }).catch(() => {}) 146 } 147 }, 148 }; 149 </script> 150 151 <style lang="scss" scoped> 152 @import "search"; 153 </style>
子组件处理：
1 <template> 2 <div> 3 <div ref="mescroll" class="mescroll"> 4 <div class="search-content wrapper" ref="scroller" > 5 <ul> 6 <li class="item" v-for="(item,index) in dataList" :key="index"> 7 <div class="personBlock" @click="openUserClick(item.userDetail.userId)"> 8 <div class="showImg"> 9 <img :src="item.userDetail.userThumUrl" /> 10 <template v-if="item.userDetail.kolFlag"> 11 <em v-if="item.userDetail.kolFlag" class="icon c_kol"></em> 12 </template> 13 <template v-else> 14 <em class="icon c_company" v-if="item.userDetail.upSignType == '1'"></em> 15 <em class="icon c_person" v-if="item.userDetail.upSignType == '0'"></em> 16 </template> 17 18 </div> 19 <div class="showInfo"> 20 <div class="name">{{item.userDetail.nickName}}</div> 21 <div class="attentionCount"> 22 {{item.userDetail.fansCount || 0}}人关注TA 23 </div> 24 </div> 25 </div> 26 <div class="sendBtn" :class="{active:item.userDetail.inviteStatus || (successInvite.indexOf(item.userDetail.hwUserId) > -1 ) }" @click="inviteClick(item.userDetail)"> 27 <span v-if="item.userDetail.inviteStatus || successInvite.indexOf(item.userDetail.hwUserId) > -1">已邀请</span> 28 <span v-else>邀请</span> 29 </div> 30 </li> 31 </ul> 32 33 </div> 34 </div> 35 <empty v-show="isEmpty"> 36 <p class="note">纳尼，竟然找不到这个人…</p> 37 </empty> 38 </div> 39 </template> 40 41 <script> 42 import MeScroll from 'mescroll.js'; 43 import 'mescroll.js/mescroll.min.css'; 44 import Empty from './empty'; 45 const pageSize=10; 46 export default { 47 name: 'SearchContent', 48 props: { 49 searchName: { 50 type: String, 51 default: '' 52 }, 53 successInvite: { 54 type: Array, 55 default: [] 56 } 57 }, 58 data() { 59 return { 60 dataList: [], 61 mescroll: null, //mescroll实例对象 62 totalPage:1, 63 isEmpty:false 64 } 65 }, 66 components:{ 67 Empty 68 }, 69 watch: { 70 'searchName' () { 71 this.dataList = [];//要清空，不然有时候会出现上拉加载不了 72 this.searchName !== '' && this.mescroll.resetUpScroll(); 73 } 74 }, 75 mounted () { 76 console.log(this.searchName) 77 this.mescroll = new MeScroll(this.$refs.mescroll, { //在mounted初始化mescroll,确保此处配置的ref有值 78 down:{isLock: true}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则down可不用写了) 79 up: { 80 callback: this.upCallback, 81 // 以下是一些常用的配置,当然不写也可以的. 82 page: { 83 num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始 84 size: 10, //每页数据条数,默认10 85 }, 86 htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在加载中..</p>', 87 htmlNodata: '<p class="upwarp-nodata" style="height:.4rem">当当当~已经到底啦~</p>', 88 noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 89 isBounce: true, 90 }, 91 down:{ 92 use:false 93 }, 94 }); 95 }, 96 methods: { 97 //点击调起个人主页 98 openUserClick (item) { 99 console.log(item) 100 var userId = item; 101 mui.openClient({"pageType": "userHome","userId":item}); 102 }, 103 //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10 104 upCallback(page) { 105 //联网请求 106 this.$request.post(_basePath + '/activity/page20191018/searchAll.html', {hintKey:this.searchName,searchType:91,pageNo:page.num,pageSize:page.size,actionSource:'07'}).then((response) => { 107 if(response && response.resultList){ 108 // 请求的列表数据 109 let result = response.resultList[0]; 110 let arr = result.list; 111 // 如果是第一页需手动置空列表 112 if (page.num === 1) this.dataList = [] 113 // 把请求到的数据添加到列表 114 this.dataList = this.dataList.concat(arr) 115 // 数据渲染成功后,隐藏下拉刷新的状态 116 this.totalPage = result.total % pageSize > 0 ? Math.floor(result.total / 10 + 1) : result.total / 10;//计算总页数超过就不loadMore 117 this.$nextTick(() => { 118 this.mescroll.endSuccess(arr.length); 119 this.mescroll.endByPage(arr.length, this.totalPage) 120 }) 121 }else{ 122 this.isEmpty = true; 123 this.mescroll.endErr(); 124 } 125 }).catch(() => { 126 this.mescroll.endErr(); 127 }) 128 }, 129 inviteClick(item) { 130 this.$emit('inviteClick',item); 131 } 132 } 133 134 } 135 </script> 136 137 <style lang="scss" scoped> 138 .mescroll { 139 position: fixed; 140 top: .9rem; 141 bottom: 0; 142 left:0; 143 height: auto; 144 } 145 .search-content{ 146 padding:0 .24rem; 147 background: #121223; 148 ul{ 149 height:auto; 150 .item{ 151 display:flex; 152 justify-content:space-between; 153 align-items:center; 154 width:100%; 155 height:1.56rem; 156 .personBlock{ 157 display:flex; 158 justify-content: flex-start; 159 align-items: center; 160 .showImg{ 161 position:relative; 162 width:1rem; 163 height:1rem; 164 margin-right:.16rem; 165 border:.02rem solid #51516D; 166 border-radius:50%; 167 box-sizing: border-box; 168 img{width:100%;height:100%;border-radius:50%} 169 .icon{ 170 position: absolute; 171 bottom:0; 172 right:0; 173 width:.28rem; 174 height:.28rem; 175 background-image:url(); 176 background-repeat:no-repeat; 177 background-size:contain; 178 &.c_company{background-image:url(../../images/c_company.png);} 179 &.c_person{background-image:url(../../images/c_person.png);} 180 &.c_kol{background-image:url(../../images/kol.png);} 181 } 182 } 183 .showInfo{ 184 .name{font-size:.3rem;color:#fff;font-weight:500;line-height:.42rem;text-align:left;} 185 .attentionCount{font-size:.26rem;font-weight:400;color:#716D80;text-align:left;} 186 } 187 } 188 189 .sendBtn{ 190 width:1.44rem; 191 height:.56rem; 192 line-height:.56rem; 193 background:#FF005E; 194 border-radius:.28rem; 195 color:#fff; 196 text-align:center; 197 &.active{background:#2C2B41;color:#fff} 198 } 199 } 200 } 201 } 202 203 </style>
填坑处理：
1、用户未输入搜索关键词时，mescroll不能就直接初始话，要在用户输入的时候才能初始化，所以子组件就接受了父组件的keyword，并用
v-if="keyword !== ''"来判断加载子组件的条件，然后子组件通过监听keyword的变化，重置mescroll：如下：
watch: {
'searchName' () {
this.dataList = [];//要清空，不然有时候会出现上拉加载不了
this.searchName !== '' && this.mescroll.resetUpScroll();
}
},
2、搜索完以后点击搜索输入框右边里的关闭按钮，发现其他列表不能滑动。解决方法：要加：isBounce: true,
