AMAZEUI之iscroll 下滑刷新/上拉加载更多实例

最新推荐文章于 2022-01-07 10:45:54 发布

有时间织个毛衣

最新推荐文章于 2022-01-07 10:45:54 发布

阅读量3.7k

点赞数 1

本文链接：https://blog.csdn.net/chenjin_chenjin/article/details/79260246

版权

最新在做一个微信商城有用到商铺列表展示，需要使用滑动上拉加载数据，就使用了iscroll，中间遇到很多坑，这里使用iscroll做一个简单的例子，希望能帮助到一些同学。

1.首先进入amazui官网下载amaui的zar包，解压到项目中

2.新建case.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>豆瓣同城 - 音乐 - 北京 | Just a iScroll Demo</title>
<link rel="stylesheet" href="../style/css/amazeui.min.css" />
  <style>
    html,
    body,
    .page {
      height: 100%;
    }

    #wrapper {
      position: absolute;
      top: 49px;
      bottom: 0;
      overflow: hidden;
      margin: 0;
      width: 100%;
      padding: 0 8px;
      background-color: #f8f8f8;
    }

    .am-list {
      margin: 0;
    }

    .am-list > li {
      background: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .pull-action {
      text-align: center;
      height: 45px;
      line-height: 45px;
      color: #999;
    }

    .pull-action .am-icon-spin {
      display: none;
    }

    .pull-action.loading .am-icon-spin {
      display: block;
    }

    .pull-action.loading .pull-label {
      display: none;
    }
  </style>
</head>
<body>
<div class="page">
  <header data-am-widget="header" class="am-header am-header-default">
    <h1 class="am-header-title">
      同城 - 音乐
    </h1>
  </header>

  <div id="wrapper" data-am-widget="list_news"
       class="am-list-news am-list-news-default">
    <div class="am-list-news-bd">
      <div class="pull-action loading" id="pull-down">
        <span class="am-icon-arrow-down pull-label"
              id="pull-down-label"> 下拉刷新</span>
        <span class="am-icon-spinner am-icon-spin"></span>
      </div>
      <ul class="am-list" id="events-list">
        <li class="am-list-item-desced">
          <div class="am-list-item-text">
            正在加载内容...
          </div>
        </li>
      </ul>
      <div class="pull-action" id="pull-up">
        <span class="am-icon-arrow-down pull-label"
              id="pull-up-label"> 上拉加载更多</span>
        <span class="am-icon-spinner am-icon-spin"></span>
      </div>
    </div>
  </div>
</div>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../style/js/handlebars.min.js" type="text/javascript"></script>
<script src="../style/js/amazeui.min.js" type="text/javascript"></script>
<script type="text/x-handlebars-template" id="tpi-list-item">
  {{#each this}}
  <li class="am-list-item-desced" data-id="{{id}}">
    <a href="{{alt}}" class="am-list-item-hd" target="_blank">{{title}}</a>

    <div class="am-list-item-text">{{content}}</div>
  </li>
  {{/each}}

</script>

<script type="text/javascript">
/*
   iscroll 流程顺序
  1.创建dom  **dom必须在iscroll实例之前创建否则无法滚动
  2.创建iscroll实例
  3.设置下滑，上拉的条件 
    (1).startY startX:开始滑动的X,Y位置.一般用来隐藏刷新页面  默认值 0,0
    (2).distY:滑动的绝对距离
    (3).directionY: 上一次滑动状态**（1 上拉 -1 下滑 0 未动）
    (4).pullStart :设置每次开始滚动的初始值，*用来比较
  4.动态的插入data。 **每次dom插入新数据时需要刷新iscroll
*/
	$(function(){
		createLi(false);
	});
	function createLi(flg){
		var html = [];
		for(var i=0;i<13;i++){
			html.push('<li class="am-list-item-desced" data-id="1"> ');			
			html.push('<a href="" class="am-list-item-hd" target="_blank">测试amazeUI</a> '); 
			html.push('<div class="am-list-item-text">iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。</div>' );   
			html.push('</li>');
		}
		var createContent = html.join(" ");
		if (flg) {
			$('#events-list').append(createContent); 
		} else {
			$('#events-list').html(createContent); 
		}
		
	}
</script>
 <script type="text/javascript">
	var myScroll;
	var next = 0;
	$(function() {
	var height = document.body.clientHeight;
	height = height < 700 ? 700 : height;
	createMyScroll();
	//添加手机自带的滑动效果
	/*
		element.addEventListener(type,listener,useCapture)
		基中element是要绑定函数的对象；
		type是事件名称，要注意的是”onclick”要改为”click”,”onblur”要改为”blur”,也就是说事件名不要带”on”；
		listener当然就是绑定的函数了，记住不要跟括号；
	           最后一个参数是个布尔值，表示该事件的响应顺序。布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
	*/
	document.addEventListener('touchmove', function(e) {
		e.preventDefault();
	}, false);
	});
	function createMyScroll() {
		var IScroll = $.AMUI.iScroll;
		myScroll = new IScroll("#wrapper",{
			click:true,
			startY:-43,
		});
		var pullFormTop = false;
		var topOffset = -$("#pull-down").outerHeight();
		var pullStart=0;//每次滚动的开始位置
		// 滑动开始事件 保存每次滑动初始值
		myScroll.on("scrollStart",function(){
			if (this.y>=topOffset) {
				pullFormTop=true;
			}
			pullStart = this.y;
		});
		//滑动结束事件   调用下滑 或者上拉
		myScroll.on("scrollEnd",function(){
			// 当是下滑 and  滑动初始值为dom初值  and 上次滑动为下滑（可以不要）
			if(pullFormTop && pullStart=== -43 && this.directionY === -1) {
				handlePullDown();
				return;
			}
		   // 当当前dom对象的y值大于滑动初始位置时，恢复初始位置
			if (this.y >= -43) {
				myScroll.scrollTo(0,-43);
				return;
			}
		   // 滑动初始值与当前值不等时
			if(pullStart != this.y) {
				return;
			}
		   //上次滚动是上滑
			if (this.directionY === 1) {
				handlePullUp();
			}
		});
	}
	function handlePullDown() {
		  var $pullDown = $("#pull-down");
		  if(!this.queryLoading($pullDown)){
			  this.setLoading($pullDown)
		  }
		  
		  setTimeout(function(){
			  this.resetLoading($pullDown);
			  createLi(false);
			  $("#pull-up-label").html("上拉加载更多");
			  myScroll.scrollTo(0,-43);
		  },1000);
	};
	function handlePullUp() {
		  console.log('handle pull up');
		  if (next >= 3) {
			  $("#pull-up-label").html("没有更多了");
		  } else {
			  next++;
		      createLi(true);
		      //每次dom插入新数据时需要刷新iscroll
		      myScroll.refresh();
		  }
	}
	  this.setLoading = function($el) {
	      $el.addClass('loading');
	    };
	  this.queryLoading= function($el) {
		  $el.hasClass("loading");
	  };
	  this.resetLoading = function($el) {
	    $el.removeClass('loading');
	  };
</script>

</body>
</html>
<!--http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html-->

注：知识点在代码中，好好观察吧。友情提示iscroll参数解释：点击打开链接