sdc-alibaba / sui-mobile

SUI Mobile (MSUI)是由阿里巴巴国际UED前端出品的移动端UI库，轻量精美

SUI Mobile(MSUI)

轻量的UI库

SUI Mobile 是阿里巴巴国际UED前端团队出品的移动端 UI库。

没有重复造轮子。主要借鉴 Framework7 的形态并以此为基础，参考Ratchet、Ionic、Onsen各种不同的思路，强化功能，精简体积，并提供国内最稳定快速的CDN支持。此外还定制增强了一些工具类开源库。

它的特点是非常轻量，并且能很好兼容 iOS 6.0+ 和 Android 4.0+ 的设备。

更多信息请前往 官网

问题反馈

首先在官网FAQ页看下常见疑问里有没有你的问题。
其次在issue里搜索一下你的问题关键字，可能之前已经有人遇到并解决了，可以节省大量时间精力。

明确的问题更__推荐__直接提issue反馈。

也可以在旺旺群 1278550944 交流或邮件咨询 [email protected]

Issue 注意

考虑到移动端的特性，请一定写明 系统、机型、浏览器的型号和版本

Pull Request

强烈欢迎大家提交PR一起完善，共建社区。简明开发文档在 develop.md

sui-mobile's Issues

跳转页面后页面title没有发生变化？

通过内部路由器对象跳转页面后页面的title标题没有发生变化

官方demo，内联路由在iphone4s的ios8 safari浏览器里不起作用啊！

这个官方路由demo在iphone4s的ios8 safari浏览器里不起作用啊！
地址：
http://m.sui.taobao.org/docs-demos/router/
求测试解答啊！

你好，一个页面的标签页切换，各标签里面的无限滚动实现应该怎么搞定呢？

你好，一个页面的标签页切换，各标签里面的无限滚动实现应该怎么搞定呢？

card 在安卓机上有问题

card-footer，card-header 的display:flex;不兼容安卓机器！item-after在安卓机上，也有问题！

pageInit的时候，怎么获取url参数了？

pageInit的时候，怎么获取url参数了？

0.5.0版本在UC浏览器上的问题

测试发现在UC浏览器下，写一个最简单的页面，引入的是0.5.0的css与js，但是引入min的css 列表的样式不对， 向右箭头在左边，但是引入完整版的css 就不会有问题。其次是列表的 标签连接失效，点击完全没反应

日期时间控件，第一次无法确认，第二次变成1950年

日期时间控件问题。
第一次无法确认，text框没有值.
第二次变成1950年01月01

链接无法跳转

0.5.0 无限滚动问题

完全从官网copy的例子，但是 $(document).on('infinite', '.infinite-scroll', function () {})并不触发事件

页面返回时，50%的几率出现抖动，抖动发生后主页面的滚动条失效

iphone4s ios8.4.1

Uncaught TypeError: Cannot read property '1' of null

点击连接报这个错，怎么回事。

工具栏怎么切换？

“注意: 使用 push.js 加载新页面”，使用帮助里是这么写的，但是push.js具体指的是哪个插件啊？
关于底部工具栏的切换问题困扰我一天了。。。

if (layer.style.msTouchAction === 'none' || layer.style.touchAction === 'manipulation') {}

Uncaught TypeError: Cannot read property 'style' of null
我在chrome里面 模拟手机的时候 layer是undefined

联系人列表字母不停靠

联系人列表的字母不能停靠在顶部，手机：魅族mx5，android：5.5.1

微信里，Picker组件的省市区选择，会调出系统软键盘

微信里，省市区选择，会调出系统软键盘 手机：魅族mx5 android：5.0.1 微信：6.2.4

微信里，无限加载，滚动条乱跳

微信里，无限加载，滚动条乱跳 手机：魅族mx5 android：5.0.1 微信：6.2.4

加入搜索框后页面不正常显示附解决方法

在searchbar类上加overflow:hidden即可

picker组件有值时初始化问题

初始化时，如果input存在值时，打开浮层时，无法像select一样选中初始值。

picker touch穿透问题

版本为0.5.0

picker调出后，触摸滑动picker的非文字部分，picker后面的内容响应了拖动，进行了滑动响应

测试环境：ios 8.4 iPhone5

微信浏览器，input type 为date，没有日期选择框

使用此ui作为web.
在微信中打开，按照官网加载所有css与js。

没有日期选择框。

设备：android

无限滚动问题

有如下场景：
html是由模板引擎生成的，将此html内容（包含

元素）放进页面正常显示，但是并不会触发infinite事件

使用$.attachInfiniteScroll('.content')处理报错（Uncaught TypeError: Cannot read property 'on' of undefined）

先调用 $.refreshScroller()然后调用上述函数也会出现这个问题。

是因为content没有经过页面初始化的处理导致的吗？

如果是，msui有提供相关api进行处理这个问题吗？

是否有相关js api来手动初始化各个组件？

版本更新0.5.0后 出现几个问题

在第一个页面显示输入框，提交跳转后，输入框没有隐藏，
更新0.5.0后 iphone6plus 切换感觉很卡顿 iphone6 上没问题，

在含有popup组件的页面使用router前进后退有bug

如果一个页面含有popup html组件，则每次router到该页面都会使html源码中的popup代码增加一份副本。另外这些popup组件上的事件也会随之多绑定一次。

网页 省市区选择器 给的链接错误

在 http://m.sui.taobao.org/extends/#city-picker 中，

使用省市区选择器，你需要在 sm.js 和 sm.css 之后额外引入如下JS文件:
<link rel="stylesheet" href="//g.alicdn.com/sui-mobile/sm/0.5.0/css/sm-city-picker.min.css">

js文件应该为
<script type="text/javascript" src="//g.alicdn.com/sui-mobile/sm/0.5.0/js/sm-city-picker.min.js" charset="utf-8"></script>

sui Mobile有左滑删除功能么？

sui Mobile有左滑删除功能么？

a标签自动添加向右图标问题

请问如何去掉a标签自动添加向右图标？

如果想自定义这个图标，该怎么办？

这个图标出现的位置是什么规则控制的？

你们官网的列表视图卡片，添加a标签后，出现的位置不是期望的

另外，有没有一个系统的api？目前官网只有一些demo，最好能有一个详细的api说明每个类是做什么的

cdn上的v0.5.0在手机Safari浏览器中空白页面

cdn上的v0.5.0在手机Safari浏览器中空白页面，0.4及以下版本是正常的
http://183.56.152.213:45/index04.html //v0.4正常
http://183.56.152.213:45/index05.html //v0.5手机Safari浏览器异常

ajax加载页面请求头问题

您好：
我使用sui加载新页面的时候，get请求的头部竟然是application/json，而不是text/html，我在路由的getPage函数里$.ajax直接设置contentType也是无效，有什么办法可以解决这个问题么？
这边我测试地址：http://mall.jcq.tbapps.cn/mall/user/test

谢谢！

浏览器回退需要点击两次

RT，点击两次才能完成回退操作

每次ajax加载页面后都会多出一个.page的div就算

请问如何返回首页

页面从A->B->C，请问在C页面怎么back到A页面，F7可以通过

homeView.router.back({
    url: 'index.html',
     force: true
});

返回

建议把t7作为可选项

目前试用t7过程中十分不好用 打算用vue替代 建议把t7抽离 选用更好的模板引擎

页面切换时，有拖影现象

微信webview里，页面切换时，有拖影现象 手机：魅族mx5 android：5.0.1 微信版本：6.2.4

下拉刷新和滚动条冲突怎么搞

比如把网页滚动到底部想把网页网下拉回到顶部，是滚动条操作，结果却触发了下拉刷新事件

单页控制多侧栏的问题

在任何元素上增加 .open-panel 类都可以使它能点击打开侧栏。如果有多个侧栏，你可以通过 data-panel='{panel的选择}'来指定具体打开哪一个侧栏。我写了两个侧栏，两个分别用不同的data-panel='{panel的选择}来控制，但是不起作用，加了这个和不加的一样，一直都是显示同一个侧栏。

怎样下载离线版？

github版本下载了，没找到引用文件，github上面的是不是未编译版本？

dom树很大切换很卡，有什么优化方案嘛

app首页的dom树很大，这就会造成页面切换很卡，
原因应该是新的页面插入到dom里面，造成了回流，由于dom树大，回流的过程中要重现计算和渲染，所以造成切换动画卡顿，请问有什么优化方案吗？？

侧栏和幻灯片同时存在时，滑动幻灯片会导致侧边栏出来

rt

问题补充，手机上没有发现这个问题

求科普：github上怎么生成和cdn上一样的css和js

菜鸟求助

使用sui的时候，点击一个链接进入下个页面的时候，在第一个页面上载入了自己的css文件，下个页面消失

QQ浏览器-日历-显示布局错位

可以与Cordova配合吗

。。。。

Picker的问题

1、通过路由放问到一个新页面，第一次Picker不起作用，需要刷新下才能点击触发
2、如果Picker只有一列时，在IOS上点开Picker之后，触摸空白处时，存在兼容性问题，会整屏幕往上移动了

滚动条里的checkbox不能点击啊

希望能提供一个 numberbox 插件

做电商业务的时候购物车的 numberbox 插件 还是比较常见的。

幻灯片滑动的时候俩种图片中间弄个留白，一点不美观，怎么去掉

幻灯片滑动的时候俩种图片中间弄个留白，一点不美观，怎么去掉 margin-right: 10px; 这个是什么鬼？

<div class="swiper-slide swiper-slide-prev" style="width: 321px; margin-right: 10px;">
<img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
</div>

拓展组件图片浏览器报错

Uncaught TypeError: Cannot read property 'length' of undefined

popup能够正常弹出，默认模式和带问题模式点击时报上面的错误，是按照sui模板套的demo

完整代码奉上

<!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/sui-mobile/sm/0.5.0/css/sm.css">
        <link rel="stylesheet" href="//g.alicdn.com/sui-mobile/sm/0.5.0/css/sm-extend.css">

        <!--<link rel="stylesheet" href="/your-css-file.css">-->
    </head>

    <body>
        <header class="bar bar-nav">
            <h1 class="title">图片浏览器</h1>
        </header>
        <div class="content page">
            <div class="content-block row">
                <div class="col-50"><a href="#" class="button pb-standalone">Standalone</a></div>
                <div class="col-50"><a href="#" class="button pb-popup">Popup</a></div>
            </div>
            <div class="content-block"><a href="#" class="button pb-standalone-captions">With Captions</a></div>
            <div class="content-block"><a href="#" class="button pb-standalone-video">With Video</a></div>
        </div>
        <!-- 你的html代码 -->
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/sui-mobile/sm/0.5.0/js/sm.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/sui-mobile/sm/0.5.0/js/sm-extend.js' charset='utf-8'></script>

        <!--<script src="/your-js-file.js"></script>-->
        <script type="text/javascript">
             /*=== 默认为 standalone ===*/
            $(function() {
                /*=== 默认为 standalone ===*/
                $.photoBrowser.prototype.defaults.container = '#iwindow';
                var myPhotoBrowserStandalone = $.photoBrowser({
                    photos: [
                        '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                        '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                        '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
                    ]
                });
                //点击时打开图片浏览器
                $(document).on('click', '.pb-standalone', function() {
                    myPhotoBrowserStandalone.open();
                });
                /*=== Popup ===*/
                var myPhotoBrowserPopup = $.photoBrowser({
                    photos: [
                        '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                        '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                        '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
                    ],
                    type: 'popup'
                });
                $(document).on('click', '.pb-popup', function() {
                    myPhotoBrowserPopup.open();
                });
                /*=== 有标题 ===*/
                var myPhotoBrowserCaptions = $.photoBrowser({
                    photos: [{
                            url: '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                            caption: 'Caption 1 Text'
                        }, {
                            url: '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                            caption: 'Second Caption Text'
                        },
                        // 这个没有标题
                        {
                            url: '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
                        },
                    ],
                    theme: 'dark',
                    type: 'standalone'
                });
                $(document).on('click', '.pb-standalone-captions', function() {
                    myPhotoBrowserCaptions.open();
                });
                /*=== 有视频 ===*/
                var myPhotoBrowserVideo = $.photoBrowser({
                    photos: [{
                        html: '<iframe src="//www.youtube.com/embed/lmc21V-zBq0?list=PLpj0FBQgLGEr3mtZ5BTwtmSwF1dkPrPRM" frameborder="0" allowfullscreen></iframe>',
                        caption: 'Woodkid - Run Boy Run (Official HD Video)'
                    }, {
                        url: 'http://lorempixel.com/1024/1024/sports/2/',
                        caption: 'Second Caption Text'
                    }, {
                        url: 'http://lorempixel.com/1024/1024/sports/3/',
                    }, ],
                    theme: 'dark',
                    type: 'standalone'
                });
                $(document).on('click', '.pb-standalone-video', function() {
                    myPhotoBrowserVideo.open();
                });
            })
        </script>
    </body>
    </html>

安卓5.0以上版本链接问题

安卓5.0以上版本点击A标签链接没有反应，无效。为什么呢？

how to make page back to the position where i go in?

Our team want to write web page just like native effect.And i think this source is closer to what we want.

when apply the router features, form a page to another page ,the sliding effect is great.

But when i scan a page of news-list, and i find one list to go in.I want when i go back to the news-list, the page is still the position when i go in.Because i dont want to see more news form the beginning position everytime

android机器app中的下拉刷新，带动顶部导航栏上下滚动

HI，亲。反馈一个问题：下拉刷新的时候，出现顶部导航栏跟着上下滚动的情况

重现步骤：
1，打开页面

2，下拉，加载一个新的内容

3，一切是多么的美好，但现在就是再向上滚动列表，顶部导航会跟关上下滚动

目前情况重现于：小米3，魅族mx4 pro的app中