关于阿里阿里巴巴共享业务事业部UED团队出品的sui基于zepto的开源UI框架的使用心得

时间 2019-11-11

标签关于阿里阿里巴巴共享业务事业 ued 团队出品 sui 基于 zepto 开源框架使用心得栏目阿里巴巴繁體版

原文原文链接

1.项目官网地址：http://m.sui.taobao.org/javascript

2.项目使用能够参考开始使用和示例css

3.项目是放在 Github 上的 https://github.com/sdc-alibaba/SUI-Mobile，咱们能够使用git 下载到本地使用grunt 根据须要重构html

4.helloworld:前端

　　1.新建demo.html 并填充须要的结构java

　　2.引入须要的cdn 文件git

　　3.将script放到页面脚步，调用须要的组件，若是是分别调用须要的js，那么咱们通常须要引用zepto-adapter.js util.js init.js 以及咱们须要的js组件在调用的script结尾前可能须要初始化 $.init();github

这里给一个下拉更新的代码示例web

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description" content="MSUI">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <!-- Google Web Fonts -->
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://m.sui.taobao.org/assets/css/demos.css">
    <link rel="stylesheet" href="http://m.sui.taobao.org/assets/css/docs.css">
    <script src="http://m.sui.taobao.org/assets/js/zepto.js"></script>
    
  </head>
  <body>
    <!-- page集合的容器，里面放多个平行的.page，其余.page做为内联页面由路由控制展现 -->
    <div class="page-group">
        <!-- 单个page ,第一个.page默认被展现-->
        <div id="page-ptr" class="page">
          <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back" href="/demos">
              <span class="icon icon-left"></span>
              返回
            </a>
            <h1 class="title">栅格</h1>
          </header>
          <div class="content pull-to-refresh-content">
            <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">卡片标题</div>
                <div class="card-content">
                  <div class="card-content-inner">
                    下拉屏幕试试，会出现更多的卡片
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>   
    </div>


    <!-- 默认必需要执行$.init(),实际业务里通常不会在HTML文档里执行，一般是在业务页面代码的最后执行 -->
   <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
<!-- <script src="http://m.sui.taobao.org/assets/js/demos.js"></script> -->
<script>
    $(function () {
  'use strict';
  //下拉刷新页面
  $(document).on("pageInit", "#page-ptr", function(e, id, page) {
    var $content = $(page).find(".content").on('refresh', function(e) {
      // 模拟2s的加载过程
      setTimeout(function() {
        var cardHTML = '<div class="card">' +
          '<div class="card-header">标题</div>' +
          '<div class="card-content">' +
          '<div class="card-content-inner">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容' +
          '</div>' +
          '</div>' +
          '</div>';

        $content.find('.card-container').prepend(cardHTML);
        // $(window).scrollTop(0);
        // 加载完毕须要重置
        $.pullToRefreshDone($content);
      }, 2000);
    });
  });
    $.init();
});  
</script>
  </body>
</html>

View Code

启动从https://github.com/sdc-alibaba/SUI-Mobile 克隆下拉的项目 npm install 之后 jekyll serve 启动项目npm

关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得

关于阿里阿里巴巴共享业务事业部UED团队出品的sui基于zepto的开源UI框架的使用心得