SUI-mobile起步

时间:2022-08-24 14:56:27

减少不必要造*的过程,于是在APP项目中推进SUI Mobile的使用,主要目的是使用它的一些基本样式,以及各种封装好的组件,但并没有创建单页应用。

刚刚开始使用,使用之中遇到一个槽点,记录一下(主要是SUIMobile的文档写的真心不是很友好)。

项目中有一个需求:

SUI-mobile起步

直接上图吧,标签页分为审核和未审核,里面的内容都需要无限滚动加载,所以自然而然的翻到对应文档无线滚动的地方,“多个标签页下的无限滚动

”,然后各种照搬html,后面接着就直接把js也搬上了。

$(document).on("pageInit", function() {
//多个标签页下的无限滚动
var loading = false;
// 每次加载添加多少条目
var itemsPerLoad = 20;
// 最多可加载的条目
var maxItems = 100;
var lastIndex = $('.list-container li')[0].length;
function addItems(number, lastIndex) {
// 生成新条目的HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
html += '<li class="item-content" onClick="alert(1)"><div class="item-inner"><div class="item-title">新条目</div></div></li>';
}
// 添加新条目
$('.infinite-scroll.active .list-container').append(html);
}
$(page).on('infinite', function() {
// 如果正在加载,则退出
if (loading) return;
// 设置flag
loading = true;
var tabIndex = 0;
if($(this).find('.infinite-scroll.active').attr('id') == "tab2"){
tabIndex = 0;
}
if($(this).find('.infinite-scroll.active').attr('id') == "tab3"){
tabIndex = 1;
}
lastIndex = $('.list-container').eq(tabIndex).find('li').length;
// 模拟1s的加载过程
setTimeout(function() {
// 重置加载flag
loading = false;
if (lastIndex >= maxItems) {
// 加载完毕,则注销无限加载事件,以防不必要的加载:$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));多个无线滚动请自行根据自己代码逻辑判断注销时机
// 删除加载提示符
$('.infinite-scroll-preloader').eq(tabIndex).hide();
return;
}
addItems(itemsPerLoad,lastIndex);
// 更新最后加载的序号
lastIndex = $('.list-container').eq(tabIndex).find('li').length;
$.refreshScroller();
}, 1000);
});
});

 各种无效,最终各种调试,发现根本问题所在,无法触发pageInit这一事件,哭啊,无法想象的各种折腾,最后实在是没办法了,只有把这一行直接删了,就这么搞定了。真的,就这样在不可理喻中把问题解决了。

 可是心有不甘啊,这是为什么呢?明明他的示例都是可以的,为什么到我这就不行了?等到工作完成之余,开始从头翻看他的文档。

终于,在他的“初始化”这段,发现了这么一句话:“注意,必须执行初始化方法: $.init()。他会调用 $.initPage 方法初始化页面组件,并且触发一个 pageInit 事件,所以请确保在所有的 pageInit 事件绑定之后再调用 $.init() 方法。

在所有的pageInit事件绑定之后再调用$.init()。

而我总是在DOM加载完成之后,就直接调用$.init()了。

隐藏的太深了,文档不一点点翻,都找不到这么一句。

SUI-mobile起步的更多相关文章

  1. 移动端前端UI库—Frozen UI、WeUI、SUI Mobile

    [MUI]http://www.dcloud.io/ [Clouda]http://clouda.baidu.com/blend2是百度历时两年共同研发的开源App技术框架,基于Node.js,简单易 ...

  2. 移动端前端框架UI库(Frozen UI、WeUI、SUI Mobile)

    Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...

  3. 推荐:移动端前端UI库—Frozen UI、WeUI、SUI Mobile

    Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...

  4. 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile

    web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/  很厉害的一个个人产品 http://amazeui ...

  5. 阿里巴巴SUI Mobile的使用

    1.引入文件 <link rel="stylesheet" href="./css/sm.min.css"> <link rel=" ...

  6. SUI Mobile框架开发,android、ios表单遇到的问题

    1.页面添加区域滚动,滚动区域内元素事件无效问题 解决方法: <script type="text/javascript" charset="utf-8" ...

  7. SUI Mobile

    <header class="bar bar-nav"> <h1 class='title'>只有图标的表单</h1> </header& ...

  8. sui Mobile 试玩

    .... 突然就用上这东西还不熟悉就写了一个页面而已 <a class="open-popup button pull-right create-actions" id=&q ...

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

    1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...

  10. 使用sui实现的选择控件【性别、日期、省市级联】

    使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...

随机推荐

  1. Typical EEG waveforms during sleep 睡眠状态下的几种典型EEG波形

    Sources: EEG Atlas

  2. Hadoop中pid文件存储

    我的hadoop集群部署在自己电脑虚拟机上,有时候我是挂起虚拟机,第二天再打开发现有些线程就挂了,比如namenode,好奇怪,当时看了一些帖子说是和pid存储有关,找到log看到找不到pid.因为基 ...

  3. 【HDU 1757】 A Simple Math Problem

    题 Description Lele now is thinking about a simple function f(x). If x < 10 f(x) = x. If x >= 1 ...

  4. 安卓开发之探秘蓝牙隐藏API

    上次讲解Android的蓝牙基本用法,这次讲得深入些,探讨下蓝牙方面的隐藏API.用过Android系统设置(Setting)的人都知道蓝牙搜索之后可以建立配对和解除配对,但是这两项功能的函数没有在S ...

  5. 【POJ】1692 Crossed Matchings

    经典DP,想了很久,开始想复杂了. #include <iostream> using namespace std; #define MAXNUM 100 int mymax(int a, ...

  6. Linq编程101例

    原文地址:101 LINQ Samples in C# Part1 - Restriction Operators Part2 - Projection Operators Part3 - Parti ...

  7. GridView网格线都设置

    如今,做网上商店的商品陈列,我想用网络格布局,但总认为空好看.所以我想给它一个净加格线.但是,我遇到了一个问题,网络格布局其实很easy,是集GridView布局和背景颜色adapter布局设置背景颜 ...

  8. Springmvc&plus;mybatis&plus;restful&plus;bootstrap框架整合

    框架整合: Springmvc + Mybatis + Shiro(权限) + REST(服务) + WebService(服务) + JMS(消息) + Lucene(搜搜引擎) + Quartz( ...

  9. Atomic类和CAS

    说Atomic类之前,先聊一聊volatile. 对volatile的第一印象就是可见性.所谓可见性,就是一个线程对共享变量的修改,别的线程能够感知到. 但是对于原子性,volatile是不能保证的. ...

  10. Cnario Player 接入视频采集卡采集外部音视频信号测试

    测试产品 型号: TC-D56N1-30P采集卡 参数: 1* HDMI 1.4输入, PCIe 接口为PCI-Express x4(Gen2), 最高支持4096x2160@30Hz, 支持1920 ...