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

时间：2023-03-09 06:23:15
关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得

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

2.项目使用可以参考开始使用和示例

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

4.helloworld:

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

　　2.引入需要的cdn 文件

　　3.将script放到页面脚步，调用需要的组件，如果是分别调用需要的js，那么我们一般需要引用zepto-adapter.js util.js  init.js 以及我们需要的js组件 在调用的script结尾前可能需要初始化 $.init();

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

<!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>

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