mui填坑

1,139 阅读3分钟

a 标签的 href 失效,无法跳转

原因:mui相关的一些空间通过拦截a标签的Href来实现的,故mui,js会阻止a标签的href跳转;方法: 使用js对标签添加事件监听

mui("body").on("tap","a",function(){
    document.location.href=this.href;
});

2.下拉刷新和上拉加载

必须给父盒子用绝对定位,并且给出bottom值 和top值,不给会造成手机屏幕无法滚动

上拉加载 

1.1初始化方法类似下拉刷新,通过mui.init方法中pullRefresh参数配置上拉加载各项参数

mui.init({
  pullRefresh : {
    container:refreshContainer,
//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
    up : {
      height:50,//可选.默认50.触发上拉加载拖动距离
      auto:true,//可选,默认false.自动上拉加载一次
      contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
      contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
      callback :pullfresh-function 
        //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
  }
});

1.2 加载完新数据后,需要执行endPullupToRefresh()方法,结束转雪花进度条的“正在加载...”过程 实例如下:

function pullfresh-function() {
     //业务逻辑代码,比如通过ajax从服务器获取新数据;
     ......
     //注意:
     //1、加载完新数据后,必须执行如下代码,true表示没有更多数据了:
     //2、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
     this.endPullupToRefresh(true|false);

此时的this为mui('#pullup-container').pullRefresh(),

即mui('#pullup-container').pullRefresh().endPullupToRefresh(true|false);
}

1.3重置上拉加载

    不需要再写初始化代码 

mui('#pullup-container').pullRefresh().refresh(true);


1.4禁用上拉刷新

mui('#pullup-container').pullRefresh().disablePullupToRefresh();


下拉刷新

1.1初始化(注意:height不要给不然会导致只有页面第一次加载时下拉刷新一次,后面再下拉不会触发回调函数了) 

mui.init({
  pullRefresh : {
    container:"#refreshContainer",
//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
    down : {
      style:'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
      color:'#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
     // height:'50px',//可选,默认50px.下拉刷新控件的高度,
      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
      auto: true,//可选,默认false.首次加载自动上拉刷新一次
      callback :pullfresh-function 
    //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
  }
});


1.2下拉刷新结束(注意:官网的文档是错误的)

两种模式在下拉刷新过程中,当获取新数据后,都需要执行 endPulldownToRefresh() 方法, 该方法的作用是关闭“正在刷新”的样式提示,内容区域回滚顶部位置,如下: 

     //业务逻辑代码,比如通过ajax从服务器获取新数据;
     ......
     //注意,加载完新数据后,必须执行如下代码,
//注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
     //没有更多内容了,endPulldown 传入true, 不再执行下拉刷新
     mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
}


3.tap和click

mui封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作,使用tap轻敲事件