SUI mobile 不得不说的的大坑
柏修洁
现在公司需要做app，正好要用到SUI，项目经理让我这个实习生先写个SUI的上拉刷新和无限滚动，之前在网上看到说SUi挺坑的，
第一个坑：必须显式地调用$.init()方法。
知道这里有坑，但是这个坑加上去了还是不管用？？？WTF？？
下拉刷新找了好多资料弄出来，如下是代码
<!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>
<script type="text/javascript" src="js/sui.js"></script>
</div>
</body>
</html>
js代码
$(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();
})
还是可行的，
但是在作无限滚动的时候，整了半天也没找到，去github中issue找到了问题之一
在官网的demo中html 的content 加一个’page-current’ class属性，再在js里加上$.init()
瞬间回到解放前的高兴，下拉刷新和无线滚动全都出来了。这是SUI的第一个的大坑。随着学习我会继续更新
类似资料：