大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

父组件处理:

我们提供的服务有:做网站、成都做网站、微信公众号开发、网站优化、网站认证、荔波ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的荔波网站制作公司



子组件处理:





填坑处理:

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搜索运用及各种填坑处理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


网站栏目:vue中的mescroll搜索运用及各种填坑处理
网页网址:http://dzwzjz.com/article/jdpdhp.html
在线咨询
服务热线
服务热线:028-86922220
TOP