sui mobile 使用的一些技巧和坑

技巧和坑"/>

sui mobile 使用的一些技巧和坑

前言

我是个java开发者，偶尔兼职做前端，可是我的前端基本水平很差，就和个学生一样，没有系统的学习，，尤其是最讨厌css。最近公司需要做h5移动端的页面，后台页面我还可以，h5还要写样式，很难受，抱着试一试的态度我早上看了sui mobile 的文档，下午就开始写页面了。说实话，我的目的只有一个就是不写css样式，他正好帮我实现了，虽然很多方法很坑，但是js或者jq我来自己写，这就帮了我最大的忙。下面我给大家总结一下我遇到的坑，后续还是会更新的，我一边写，一边找坑。
官方文档地址：/components/#layout

页面布局

我的目的是不需要他 写样式，所以他的有些方法，我能用则用，不能用则丢弃。
基本的页面构成结构

<div class = page>............<div class =  content></div>
</div>

声明一点，calss只要含有page等就行，比如 class = page page-current 。这个标签不是必须有的，因为这个初始化会用到这个标签，如果你的页面布局不是很复杂，也用不到无限滚动的话，就没有必要使用他。

则是很重要的，因为他要根据这个来操作对应的dom,比如超出屏幕出现滚动条等等，加上他就可以了。

路由

我不喜欢用他的路由，因为官方文档说了，如果使用了路由的话，那么跳转页面里面的js就是没办法执行，解决方法就是把所有的js写到一起，然后所有的页面都引用它。。我疯了，一个成熟的系统，js不知道有多少，，写到一起代码那么多，维护恶不恶心，如果牵一发而动全身呢。所以我不会用他的。至于如何禁用它，官方文档给了几种方法，，我感觉用不到，因为他的有些方法文件我是用不到的，所以他提供的方法只是个参考。我这边的方法是我直接修改了，他的sm.js文件。

我想的是有可能要根据自己的需求来更改他的js，所以没有用到压缩版的，，我们后期可以自己压缩嘛。多好。

初始化

$.init()， $.config.autoInit = false;这是官方文档提供的这种方法，对于第二种我不会用的，因为我没有引入他的config文件，因为里面是个路由的方法，但是我不用路由的，所有这个文件是多余的。
至于第一种，初始化的时候，你要注意一下，页面中是要包含

标签的才可以。这个就看你的页面需要不要初始化，这个不是必须的。

无限滚动(分页)

对于这个我觉得很恶心。发现很多无法实现的结果。
注意所有的页面div页面的基本布局是这样的

<div calss = "page">----<div class = "content">-----</div>
</div>

这里注意一下，每个页面有且只能有一个page和content

单页面还是很做的

满足上面的基本结构之后，你要做的就是在需要滚动的div上面加上infinite-scroll infinite-scroll-bottom。向上换成top就行。

 $(document).on('infinite', function () {------});

使用这个做监听处理就行了。

多个tab标签

这个就比较恶心了，
这个的页面结构是这样的

<div calss = "page">----<div class = "content"><div id = "tab" calss = "tab"></div><div id = "tab2" calss = "tab"></div></div>
</div>

在你需要滚动监听的tab class后面加上 infinite-scroll infinite-scroll-bottom

 <div id="tab2" class="tab  infinite-scroll infinite-scroll-bottom"><div id="listContent" class="list-block "><!-- 列表位置 --><!-- 加载提示符 --></div>
</div>

然后同上面页面一样进行监听就行了，，这里就注意了，如果你这里多个tab 都要监听的话，，这样处理，，一个监听方法。

  var active = $(this).find('.infinite-scroll.active');if (active.length > 0) {if (active[0].id == 'tab2') {pageIndex = pageIndex + 1;list()$.refreshScroller();}}

我这里是监听了tab2。其他的你们同样的方法就行。如果你们需要详细的分页方法，，你们可以留下评论。
详细代码

    $(document).on('infinite', function () {if (listLoading) {return}if (pageIndex == pages) {$('.infinite-scroll-preloader').hide();return}var active = $(this).find('.infinite-scroll.active');if (active.length > 0) {if (active[0].id == 'tab2') {pageIndex = pageIndex + 1;list()$.refreshScroller();}}});