父组件处理：
<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="/UploadFiles/2021-04-02/item.userDetail.userThumUrl">
填坑处理：
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
<mescroll-uni top="100" @down="downCallback" @up="upCallback" @init="mescrollInit" :up="upOption" :down="downOption">
//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 "color: #ff0000">总结
以上所述是小编给大家介绍的vue中的mescroll搜索运用及各种填坑处理,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！