好资源导航 » 文章资讯 » vue中的mescroll搜索运用及各种填坑处理

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

2023-08-10 04:39:04 202

父组件处理：




@import"search";

子组件处理：

{{item.userDetail.fansCount||0}}人关注TA

-1)}"@click="inviteClick(item.userDetail)"> -1">已邀请邀请纳尼，竟然找不到这个人…

.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:.02remsolid#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} } } } }

填坑处理：

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

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

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

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

ps：下面看下mescrollvue使用

github:https://github.com/mescroll/mescroll

官方文档：http://www.mescroll.com

最好按照官方文档来

开启初始化完毕之后自动执行上拉加载的回调，保证一进入页面，就去加载数据

上拉刷新的时候，或者tab切换的时候，先将数据置空

page和pageSize使用upOption中的，并且num默认为0

代码：

//html


//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(()=>{
letpageNum=mescroll.num==0?1:mescroll.num;//页码,默认从1开始
letpageSize=mescroll.size;
this.getPageList(pageNum,pageSize).then((res)=>{
mescroll.endSuccess(res)
})
},1000)
}

总结

以上所述是小编给大家介绍的vue中的mescroll搜索运用及各种填坑处理,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐