经验"/>
SUI Mobile 使用经验
最近工作中需要做一个微信公众号菜单的功能，所以就用到手机端样式，我们用的就是 SUI 库。因为之前没有接触过手机端的UI库，加上API文档上的不全面，属实折腾了很久，所以记录下踩过的坑。
一、基本布局结构
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>SUI Mobile 使用</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/msui/sm/0.6.2/css/sm.min.css"><link rel="stylesheet" href="//g.alicdn/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body><!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 --><div class="page-group"><!-- 单个page ,第一个.page默认被展示--><div class="page"><!-- 标题栏 --><header class="bar bar-nav"><a class="icon icon-me pull-left open-panel"></a><h1 class="title">标题</h1></header><!-- 工具栏 --><nav class="bar bar-tab"><a class="tab-item external active" href="#"><span class="icon icon-home"></span><span class="tab-label">首页</span></a><a class="tab-item external" href="#"><span class="icon icon-star"></span><span class="tab-label">收藏</span></a><a class="tab-item external" href="#"><span class="icon icon-settings"></span><span class="tab-label">设置</span></a></nav><!-- 这里是页面内容区 --><div class="content"><div class="content-block">这里是content</div></div></div><!-- 其他的单个page内联页（如果有） --><div class="page">...</div></div><!-- popup, panel 等放在这里 --><div class="panel-overlay"></div><!-- Left Panel with Reveal effect --><div class="panel panel-left panel-reveal"><div class="content-block"><p>这是一个侧栏</p><p></p><!-- Click on link with "close-panel" class will close panel --><p><a href="#" class="close-panel">关闭</a></p></div></div><script type='text/javascript' src='//g.alicdn/sj/lib/zepto/zepto.min.js' charset='utf-8'></script><script type='text/javascript' src='//g.alicdn/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script><script type='text/javascript' src='//g.alicdn/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script><!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 --><!-- <script>$.init()</script> --><script type="text/javascript">$(document).ready(function () {$.init();});</script>
</body>
</html>二、组件
1. picker
picker是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一。
picker 需要初始化才能使用，你可以在一个 input 元素上初始化picker，当用户点击input的时候会弹出picker的弹层
<input type="text" placeholder="选择水果" id="picker" readonly="">var val = "", displayVal = "";$("#picker").picker({toolbarTemplate: '<header class="bar bar-nav">\<button class="button button-link pull-left close-picker">关闭</button>\<button class="button button-link pull-right close-picker">确定</button>\<h1 class="title">标题</h1>\</header>',cols: [{textAlign: 'center',values: ["1", "2", "3", "4"],//隐藏值displayValues: ["苹果", "橘子", "香蕉", "葡萄"]//显示值}],formatValue: function (p, values, displayValues) {//自定义方法，用来控制如何显示picker的选中值return displayValues[0];},onClose: function (picker, values, displayValues) {//picker 关闭时的触发动作//这里获取关闭时选择的值val = picker.value[0];displayVal = picker.displayValue[0];},});得到值：可以在 onClose 关闭方法中获取
clear清除
个人发现 picker 组件只能初始化一次，当想要动态为 picker 赋值时好像没用，所以暂时用的方法是在 picker 组件外写一个div，通过div实现清除。最好再调用 picker 的初始化方法。
$(".picker-div").html('');
$(".picker-div").html('<input type="text" placeholder="选择水果" id="picker" readonly="">');2. 无限滚动
这里踩过的坑就是： $.init(); 方法一定要调用， 页面布局一定要有 page 集合的容器，也就是页面的基本布局。
<div class="page-group"><div class="page page-current"><style type="text/css">.infinite-scroll-preloader {margin-top: -20px;}</style><header class="bar bar-nav"><h1 class="title">底部无限滚动</h1></header><!-- 添加 class infinite-scroll 和 data-distance 向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分--><div class="content infinite-scroll infinite-scroll-bottom" data-distance="100"><div class="list-block"><ul class="list-container"></ul></div><!-- 加载提示符 --><div class="infinite-scroll-preloader"><div class="preloader"></div></div></div></div></div>
<script>//无线滚动// 加载flagvar loading = false;// 最多可加载的条目var maxItems = 100;// 每次加载添加多少条目var itemsPerLoad = 20;function addItems(number, lastIndex) {// 生成新条目的HTMLvar html = '';for (var i = lastIndex + 1; i <= lastIndex + number; i++) {html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';}// 添加新条目$('.infinite-scroll-bottom .list-container').append(html);}//预先加载20条addItems(itemsPerLoad, 0);//一定要初始化，无初始化方法滚动无效$.init();// 上次加载的序号var lastIndex = 20;// 注册'infinite'事件处理函数$(document).on('infinite', '.infinite-scroll-bottom', function () {// 如果正在加载，则退出if (loading) return;// 设置flagloading = true;// 模拟1s的加载过程setTimeout(function () {// 重置加载flagloading = false;if (lastIndex >= maxItems) {// 加载完毕，则注销无限加载事件，以防不必要的加载$.detachInfiniteScroll($('.infinite-scroll'));// 删除加载提示符$('.infinite-scroll-preloader').remove();return;}// 添加新条目addItems(itemsPerLoad, lastIndex);// 更新最后加载的序号lastIndex = $('.list-container li').length;//容器发生改变,如果是js滚动，需要刷新滚动$.refreshScroller();}, 1000);});</script>
更多推荐
SUI Mobile 使用经验
发布评论