apiCloud小结

底部Tab切换

由于首页有轮播,如果支持底部tab的滑动切换会导致轮播无法手动滑动,所以我设置了禁用;默认是启用的;

apiready = function(){

api.openFrameGroup({
name: 'group1',
index:0,//当前 frame 索引
preload:0,
scrollEnabled:false,//是否支持滑动切换
rect: {
x: 0,
y: 0,
w: 'auto',
h: api.winHeight-50
},
frames: [{
name: '11',
url: './html/home1.html',
bgColor: '#fff',
},{
name: '22',
url: './html/home2.html',
bgColor: '#fff'
}, {
name: '33',
url: './html/home3.html',
bgColor: '#fff'
}]
}, function(ret, err) {
switch(ret.index){
case 0:
api.setFrameGroupAttr({ // 隐藏内容层
name: 'group3',
hidden:true,
});
api.setFrameGroupAttr({ // 隐藏内容层
name: 'group2',
hidden:true,
});
break;
case 1:
api.setFrameGroupAttr({ // 隐藏内容层
name: 'group3',
hidden:true,
});
api.setFrameGroupAttr({ // 隐藏内容层
name: 'group2',
hidden:false,
});
break;
case 2:
api.setFrameGroupAttr({ // 隐藏内容层
name: 'group3',
hidden:false,
});
api.setFrameGroupAttr({ // 隐藏内容层
name: 'group2',
hidden:true,
});
break;
}
var index = ret.index+1;
footerTab.setActive(index);
});

};

列表页进入详情页

需配合

通过每个区块加入不同的data-id

通过pageParam传参,进而更改url的参数获取不同数据

// 进入图文详情
var openPicDetail = function(obj){
var id = $api.attr(obj,'data-id');
var catid = $api.attr(obj,'data-catid');
api.openWin({
name:'detail_pic',
url:'detail_pic.html',
pageParam:{
catid:catid,
id:id
}
})
};
// 进入图文详情 end

详情页html页面

apiready = function () {
var catid = api.pageParam.catid; //获取列表页传来参数
var id = api.pageParam.id;
function detail_pic_content(){
// var _URL_ = window.location.href.split('?')[1]; 之前是用<a>跳转,发现很多问题,就找了文档,需要是用openWin函数
var myUrl = 'http://cms.xingtongnet.com/api.php?op=apicloud&action=show&catid='+catid+'&id='+id;
api.ajax({
url: myUrl ,
method: 'get',
data: {}
},function(result,err){
var data = result.data;
var outBox=$(
'<div class="aui-list aui-media-list">'+
'<h1>'+
'<img src="'+data.thumb+'" alt="">'+
'</h1>'+
'<div class="aui-list-item-title aui-font-size-14">'+data.title+'</div>'+
'<li class="aui-list-item aui-list-item-middle">'+
'<div class="aui-media-list-item-inner">'+
'<div class="aui-list-item-media" style="width: 3rem;">'+
'<img src="../image/liulangnan.png" class="aui-img-round aui-list-img-sm">'+
'</div>'+
'<div class="aui-list-item-inner">'+
'<div class="aui-list-item-text">'+data.username+'</div>'+
'<div class="aui-list-item-text date">'+formatDate(data.updatetime)+'</div>'+
'</div>'+
'</div>'+
'</li>'+
'<div class="content"><p>'+data.content+'</p></div>'+
'</div>'
);

$("#detail_pic_content").append(outBox);

});

}
detail_pic_content();
}

</script>

太久没做数据交互,数组嵌套数组数据获取想了半天

最后来个视频代码

api.ajax正确用法

api.ajax({url: 'http://192.168.1.101:3101/upLoad',method: 'post',data: {values: {name: 'haha'}, files: {file: 'fs://a.gif'}}
}, function (ret, err) {if (ret) {api.alert({msg: JSON.stringify(ret)});} else {api.alert({msg: JSON.stringify(err)});}
});

apiCloud小结相关推荐

ApiCloud使用小结图文示例-简单的认识
ApiCloud是什么,看看百度百科的回答: APICloud是中国领先的"云端一体"的移动应用云服务提供商. APICloud为开发者从"云"和"端 ...
apiCloud中api.ajax方法跨域传参获取数据
apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中获取参数 var pageP ...
【阶段小结】协同开发——这学期的Git使用小结
[阶段小结]协同开发--这学期的Git使用小结一.Git简介 1. Git简单介绍 2. Git工作流程以及各个区域 3. Git文件状态变化二.Git安装&Git基本配置三.个人踩坑 ...
正则表达式(括号)、[中括号]、{大括号}的区别小结
正则表达式(括号).[中括号].{大括号}的区别小结 </h1><div class="clear"></div><div class=& ...
apiCloud中的数据库操作mcm-js-sdk的使用
1.引入js  <script type="text/javascript" src="../pl ...
php中$_REQUEST、$_POST、$_GET的区别和联系小结
php中$_REQUEST.$_POST.$_GET的区别和联系小结作者: 字体:[增加减小] 类型:转载 php中有$_request与$_post.$_get用于接受表单数据,当时他们有何种区 ...
c cin.get()的用法小结_c语言中static 用法
static在c里面可以用来修饰变量,也可以用来修饰函数. 先看用来修饰变量的时候.变量在c里面可分为存在全局数据区.栈和堆里.其实我们平时所说的堆栈是栈而不是堆,不要弄混. int a ; int ...
linux 压缩文件夹格式,Linux下常见文件格式的压缩、解压小结
Linux下常见文件格式的压缩.解压小结 .tar 解包: tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ...
设计模式：简单工厂、工厂方法、抽象工厂之小结与区别
简单工厂,工厂方法,抽象工厂都属于设计模式中的创建型模式.其主要功能都是帮助我们把对象的实例化部分抽取了出来,优化了系统的架构,并且增强了系统的扩展性. 本文是本人对这三种模式学习后的一个小结以及对他 ...

apiCloud小结

apiCloud小结相关推荐

最新文章

热门文章