父组件处理:
我们提供的服务有:做网站、成都做网站、微信公众号开发、网站优化、网站认证、荔波ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的荔波网站制作公司
{{protocolTitle}}
{{btntxt}}
子组件处理:
{{item.userDetail.nickName}}{{item.userDetail.fansCount || 0}}人关注TA已邀请 邀请纳尼,竟然找不到这个人…
填坑处理:
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//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 ? 1: mescroll.num; // 页码, 默认从1开始 let pageSize = mescroll.size; this.getPageList(pageNum, pageSize).then((res)=>{ mescroll.endSuccess(res) }) },1000) }
总结
以上所述是小编给大家介绍的vue中的mescroll搜索运用及各种填坑处理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!