SUI具有如下特点:
1.兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。
2.轻量级,核心文件压缩后之后52k
3.IOS风格
公司最近有个项目,使用到了SUI开发部分的安卓移动端页面。在SUI上没有通用的上拉刷新,下拉加载更多的ListView,而且底部无线加载图标,在list中的元素个数的高度未大于屏幕高度时也会出现。自然不能拿来直接用,所以就只有自己写一个了。
不说废话代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>通用列表页面</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<style>
.def_color {
color: #3d4145;
}
</style>
</head>
<body>
<div class="page-group">
<div class="page" id="resovle_problem">
<header class="bar bar-nav">
<a class="icon icon-left pull-left back def_color"></a>
<a class="icon pull-right def_color add_btn" style="font-size: 0.8rem;">新增</a>
<h1 class="title">列表页面</h1>
</header>
<div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" id="main_content" data-ptr-distance="55" data-distance="100">
<!-- 默认的下拉刷新层 -->
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<!-- 下面是正文 -->
<div class="card-container">
<div class="card">
<div class="card-header">card</div>
<div class="card-content">
<div class="card-content-inner">
这里是第1个card,下拉刷新会出现第2个card。
</div>
</div>
</div>
</div>
<!-- 加载提示符 -->
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
</div>
</body>
</html>
$(function() { 'use strict'; //下拉刷新页面 $(document).on('refresh', '.pull-to-refresh-content', function(e) { // 模拟2s的加载过程 setTimeout(function() { var cardNumber = $(e.target).find('.card').length + 1; var cardHTML = '<div class="card">' + '<div class="card-header">card' + cardNumber + '</div>' + '<div class="card-content">' + '<div class="card-content-inner">' + '这里是第' + cardNumber + '个card,下拉刷新会出现第' + (cardNumber + 1) + '个card。' + '</div>' + '</div>' + '</div>'; $(e.target).find('.card-container').prepend(cardHTML); // 加载完毕需要重置 $.pullToRefreshDone('.pull-to-refresh-content'); //更新数据之后 判断是否开启上拉加载 provideInfiniteScroll(); }, 2000); }); $(document).on('click', '.add_btn', function() { $.modal({ title: '弹窗', text: '<textarea style=" width:100%;"></textarea>', buttons: [{ text: '取消', onClick: function() { $.alert('You clicked first button!') } }, { text: '确认', bold: true, onClick: function() { $.alert('You clicked third button!') } }, ] }) }); //下拉是否正在加载 var loading = false; //模拟后台ajax请求 分页大小 var pageSize = 6; //模拟后台ajax请求 页码 var pageIndex = 1; $(document).on('infinite', '.infinite-scroll-bottom', function() { // 如果正在加载,则退出 if(loading) return; // 设置flag loading = true; // 模拟1s的加载过程 setTimeout(function() { // 重置加载flag loading = false; var cur_index = $('.card-container .card').length; // 添加新条目 var text="" for(var i=0;i<pageSize;i++){ text+='<div class="card"><div class="card-header">card</div><div class="card-content">' +'<div class="card-content-inner">上拉拉加载更多的'+(cur_index+i)+'card' +'</div></div></div>' } $('.card-container').append(text) //容器发生改变,如果是js滚动,需要刷新滚动 $.refreshScroller(); }, 1000); }); //移除 上拉滚动事件监听 工作 function detachInfiniteScroll(){ $('.infinite-scroll-preloader').hide(); $.detachInfiniteScroll($('#main_content')) } //判断是否应该开启上拉加载 function provideInfiniteScroll(){ //通过当前的列表容器的高度 与 窗口的高度做比对 //并且要求 上拉功能之前未出现过 才会开启上拉 var card_height = $('.card-container').attr('clientHeight'); if(card_height >= window.innerHeight && $('.infinite-scroll-preloader').css('display')!= 'none'){ $('.infinite-scroll-preloader').show(); $.attachInfiniteScroll($("#main_content")) }else{ $('.infinite-scroll-preloader').hide(); detachInfiniteScroll(); } } $.init() //先取消掉 下拉无线再加功能 detachInfiniteScroll(); })