关于一些MUI的插件的使用

一、关于MUI插件中的上拉加载和下拉刷新问题
1 此插件，在上拉加载和下拉刷新的情况下，默认已经把a链接的跳转功能禁止掉

2 解决方法：
1 找到对应的原文件，去修改源代码！！！不推荐
2 利用js去修改当前的代码：

$("body").on("tap","a",function(){
    var href = this.href;//获取到当前a链接的href值
    location.href = href;//直接利用window的方法去进行跳转
}

)

二、关于使用MUI的下拉刷新和上拉加载

1 HTML代码：

注意，要三层嵌套，并别在最大的容器添加相对定位 position：relative

// lt_view 为下拉-上拉的容器里面必须加一层嵌套 div

<div class="lt_view">
    //2 div 为额外添加的嵌套
    <div>
      //3 .lt_content 为存放数据的容器
        <ul class="lt_content">
        数据
        </ul>
    </div>
  </div>

2 初始化的js代码 callback 是一个回调函数

  mui.init({
  pullRefresh: {
    container: ".lt_view",
    down: {
      auto: true,
      //  触发下拉刷新时自动触发
      callback: function () {
      }
    },
    up:{
      //  触发上拉刷新时自动触发
      callback:function () {
      }
    }
  }
});

3 关于上拉下拉的一些常用的api

// 结束下拉刷新

mui('.lt_view').pullRefresh().endPulldownToRefresh();

// 结束上拉加载更多如果没有数据传入 true 否则传入 false

mui('.lt_view').pullRefresh().endPullupToRefresh();

// 重置组件

mui('.lt_view').pullRefresh().refresh(true);

注意：在使用重置组件的时候。如果代码片段是生成的代码，必须在代码生成之后再使用
不然是没有效果的~

三、关于MUI的懒加载，当数据图片过多的时候，占位使用

1 引入文件先引入mui-lazyload.js 然后引入mui-lazyload.img.js
如：

<script src="./js/mui-lazyload.js"></script>
<script src="./js/mui-lazyload.img.js"></script>

2 在需要进行懒加载的img的src属性变成data-lazyload

3 在生成标签之后，进行初始化

此图片路径和图片都是自定义

mui(document).imageLazyload({
      placeholder: '../static/images/60x60.gif'
});

关于一些MUI的插件的使用

猜你喜欢