关于一些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'
});

你可能感兴趣的:(js,html)