MUI - 上拉刷新/下拉加载

2022-08-07 11:32:10

新闻信息列表必备的功能,支持Table，Ul等列表.

以下是DIV版本，在安卓端或者ios端必须使用双webview模式，传送门：http://dev.dcloud.net.cn/mui/pulldown/

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">

    <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view">

        </ul>
    </div>

</div>

<script type="text/javascript">
  mui.init
  ({
    pullRefresh:
    {
      container: '#pullrefresh',
      down: {
        callback: pulldownRefresh
      },
      up: {
        contentrefresh: '正在加载...',
        callback: pullupRefresh
      }
    }
  });

  /*
   * 下拉刷新具体业务实现
   */
  function pulldownRefresh()
  {
    setTimeout(function()
    {
      var table = document.body.querySelector('.mui-table-view');
      var cells = document.body.querySelectorAll('.mui-table-view-cell');
      //模拟数据
      for (var i = cells.length, len = i + 3; i < len; i++) {
        var li = document.createElement('li');
        li.className = 'mui-table-view-cell';
        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
        //下拉刷新，新纪录插到最前面；
        table.insertBefore(li, table.firstChild);
      }

      mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
    }, 1500);
  }

  var count = 0;
  /*
   * 上拉加载具体业务实现
   */
  function pullupRefresh()
  {
    setTimeout(function() {
      mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
      var table = document.body.querySelector('.mui-table-view');
      var cells = document.body.querySelectorAll('.mui-table-view-cell');

      for (var i = cells.length, len = i + 20; i < len; i++) {
        var li = document.createElement('li');
        li.className = 'mui-table-view-cell';
        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
        table.appendChild(li);
      }

    }, 1500);
  }

  if (mui.os.plus) {
    mui.plusReady(function() {
      setTimeout(function() {
        mui('#pullrefresh').pullRefresh().pullupLoading();
      }, 1000);

    });
  } else
  {
    mui.ready(function() {
      mui('#pullrefresh').pullRefresh().pullupLoading();
    });
  }
</script>

个人心得

1、手动加载loading，并且会立即调用[下拉刷新]绑定的函数

mui('#pullrefresh').pullRefresh().pullupLoading();  //使用这个之后，自动会加载[下拉刷新]绑定的函数

2、停止上拉刷新和下拉加载的loading

mui('#pullrefresh').pullRefresh().endPullupToRefresh(num >= cnt);  //参数可以为返回true/false的表达式

mui('#pullrefresh').pullRefresh().endPulldownToRefresh()；

3、初始化

初始化时通常要将原数据列表清空，如：$("#mui-table-view").html("");

那么请务必将以下代码放置在清空代码之后.这和scroll的滚动性质有关

mui('#pullrefresh').pullRefresh().refresh(true);     //恢复滚动

mui('#pullrefresh').pullRefresh().scrollTo(0,0,100); //滚动置顶

4、Iscroll方面的扩展和内容

http://www.cnblogs.com/CyLee/p/5324622.html

5 Vue使用

<template>
    <div>
        <header class="mui-bar mui-bar-nav">
            <button @click="model" class=" mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span>{{ modelName }}</button>
            <h1 class="mui-title">笑话大全</h1>
        </header>
        <div class="mui-content mui-scroll-wrapper" id="pullrefresh" >
          <div class="mui-scroll">
                <div class="mui-card" v-for="item in items">
                        <div class="mui-card-header mui-card-media" style="">
                        <div class="mui-card-content-inner">
                                <p style="color: #333;">{{ item.content }}</p>
                            </div>
                        </div>
                        <div class="mui-card-content" v-if="item.url">
                            <img :src=" item.url " width="100%" height="100%"  draggable="false"/>
                        </div>
                        <div class="mui-card-footer">
                            Posted on {{ item.updatetime }}
                        </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
         items:[],
         page :1,
         pagesize:5,
         count:0,
         modelName:"图文"
    };
  },
  methods : {
       getJoke () {
           let self = this;
           var model = self.modelName == "图文" ? "pic" : "";
           $.ajax({
                type:"get",
                url:`http://localhost:8090?${model}&page=${self.page}&pagesize=${self.pagesize}`,
                success (data) {
                    let json = JSON.parse(data).result.data;
                    self.items = self.items.concat(json);  // 合并并且返回一个新数组
                    self.page += 1;
                    self.count += 10;
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(self.count >= 1000);
                }
        })
       },
       model () {
           this.modelName = this.modelName == "图文" ? "文字" : "图文";
           this.items = [];
           this.getJoke();
       },
       pulldownRefresh () {
           setTimeout(() => {
               mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
           },1500)
       },
       pullupRefresh () {
           this.getJoke();
       }
  },
  created () {
      let self = this;
    mui.ready(function(){
        mui.init
        ({
            pullRefresh:
            {
              container: '#pullrefresh',
              down: {
                callback: self.pulldownRefresh
              },
              up: {
                contentrefresh: '正在加载...',
                callback: self.pullupRefresh
              }
            }
        });    

        self.getJoke();
    })

  }
};
</script>

<style lang="css" scoped>
    .mui-card:nth-last-child(1){margin-bottom:70px;}
    .mui-card-header>img:first-child{width:100%;height: 100%;}
    .mui-pull-bottom-pocket{position:inherit}
</style>

码农公寓

相关文章