AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）
2018-03-03 16:35
1161 查看
声明：菜鸟一枚，入坑不久，如有欠缺，望大神给予好的建议，完善优化，分享他人。
AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）
1:aui tab分页签，手动侧滑或点击TAB栏可以切换。
2:下拉刷新（上翻页默认第一页，再下拉时更新第一页数据），上拉翻页显示数据列表。
ques_tab_win.html
AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）
1:aui tab分页签，手动侧滑或点击TAB栏可以切换。
2:下拉刷新（上翻页默认第一页，再下拉时更新第一页数据），上拉翻页显示数据列表。
ques_tab_win.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>问题上报</title>
<link rel="stylesheet" type="text/css" href="../css/framework7.material.css"/>
<link rel="stylesheet" type="text/css" href="../css/my-app.css"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
<style>
.empty{ text-align: center; padding: 120px 0; }
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
<a class="aui-pull-left aui-btn" href="javascript();" onclick="backwin()">
<img style="font-size:24px;display: inline-block;
box-sizing: border-box;vertical-align: middle;width:20px;" src="../image/back.png">
</a>
<div class="aui-title">案件上报</div>
<a class="aui-pull-right aui-btn" href="#" onclick="openNewProblemReport()">
上报新问题
</a>
</header>
<div class="aui-tab" id="tab">
<div id="mytab_1" class="aui-tab-item aui-active" tapmode onclick="randomSwitchBtn(this,0)">待处理</div>
<div id="mytab_2" class="aui-tab-item" tapmode onclick="randomSwitchBtn(this,1)">处理中</div>
<div id="mytab_3" class="aui-tab-item" tapmode onclick="randomSwitchBtn(this,2)">已结案</div>
</div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/ardo.js"></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
//var footer = $api.byId('footer');
var mytab = $api.byId('tab')
//$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = api.winHeight;
//var footer_h = $api.offset(footer).h;
var mytab_h = $api.offset(mytab).h;
api.openFrameGroup ({
name: 'footer_tab_demo',
scrollEnabled:true,
rect:{
x:0,
y:headerPos.h + mytab_h,//-23
w:'auto',
h:body_h - headerPos.h - mytab_h
},
index:0,
preload:3,
frames:
[{
name: 'ques_daichuli',
url: 'ques_tab_list.html',
bounces:false,
pageParam:{
'state':0
}
},{
name: 'ques_chulizhong',
url: 'ques_tab_list.html',
bounces:false,
pageParam:{
'state':1
}
},{
name: 'ques_yijiean',
url: 'ques_tab_list.html',
bounces:false,
pageParam:{
'state':2
}
}]
}, function(ret, err){
var mytab = $api.byId('tab');
var mytabAct = $api.dom(mytab, '.aui-tab-item.aui-active');
$api.removeCls(mytabAct, 'aui-active');
var name = ret.name;
var index = ret.index;
if(index==0){
$api.addCls($api.byId('mytab_1'), 'aui-active');
}else if(index==1){
$api.addCls($api.byId('mytab_2'), 'aui-active');
}else if(index==2){
$api.addCls($api.byId('mytab_3'), 'aui-active');
}
})
}
function closeWin(){
api.closeWin();
}
function randomSwitchBtn(obj, index) {
var mytab = $api.byId('tab');
var mytabAct = $api.dom(mytab, '.aui-tab-item.aui-active');
$api.removeCls(mytabAct, 'aui-active');
$api.addCls(obj, 'aui-active');
api.setFrameGroupIndex({
name: 'footer_tab_demo',
index: index,
scroll:true
});
}
//返回操作
function backwin(){
api.closeWin({
name: '问题上报'
});
}
//打开上报新问题页面
function openNewProblemReport(){
api.openWin({
name: '上报新问题',
url: '../html/frame31.html',
pageParam: {
name: 'test'
}
});
}
</script>ques_tab_list.html<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
<title>案件上报列表-待处理、处理中、已结案</title>
<link rel="stylesheet" type="text/css" href="../css/framework7.material.css"/>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<body>
<div class="tabs-animated-wrap">
<div class="tabs">
<div id="tab-1" class="tab">
<div class="block">
<div class="list-block" style="margin:0px;">
<ul id="daichuliDiv">
<li v-for="item in list">
<a href="#" class="item-link item-content" onclick="openProblemReport({{item.id}})">
<i class="icon" style="width: 2rem;"><img src="../image/paper.png" ></i>
<div class="item-inner">
<div class="item-title" style="color: #A0522D;"> {{item.remark}}</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/ardo.js"></script>
<script type="text/javascript">
var select = 1;
var state = 0;
var ardo = new Vue({
el: '#daichuliDiv',
data: {
p: 1,
list: []
}
});
apiready = function(){
var pageParam = api.pageParam;
state = pageParam.state;
api.parseTapmode();
queryList(state);
api.setRefreshHeaderInfo({
visible: true,
loadingImg: 'widget://image/refresh.png',
bgColor: '#f5f5f5',//#f5f5f5 #FAEBD7
textColor: '#F08080',
textDown: '下拉刷新...',
textUp: '松开刷新...',
showTime: true
}, function (ret, err) {
if(ardo.p != 1){
ardo.p = ardo.p - 1;
queryList(state);
}else{
queryList(state);
ArdoTip("已更新到最新数据！下拉刷新上拉翻页");
}
api.refreshHeaderLoadDone();
});
api.addEventListener({
name:'scrolltobottom',
extra:{
threshold:0 //设置距离底部多少距离时触发，默认值为0，数字类型
}
}, function(ret, err){
ardo.p = ardo.p + 1;
queryList(state);
});
}
//查询数据
function queryList(state) {
api.showProgress({
style: 'default',
animationType: 'fade',
title: '加载中...',
text: '请稍候...',
modal: false
});
var req = {
uid: $api.getStorage('user_id'),
token: $api.getStorage('token'),
page : ardo.p,
status: state
}
ArdoAjax(APP_GETQUELIST, req, calbackfun);
}
function calbackfun(ret, err){
api.hideProgress();
if(ret.code=='ok'){
//console.log(ret.list.length);
if(ret.list.length != 0){
ardo.list.splice(0);
if(ret.list.length > 0){
for (var i=0;i<ret.list.length; i++){
ardo.list.push(ret.list[i]);
}
}
}else{
ardo.p = ardo.p - 1;
ArdoTip("我是有底线的！");
}
}else{
ArdoTip(ret.msg);
}
}
function openProblemReport(id){
api.openWin({
name: '案件详情',
url: '../html/frame31.html',
pageParam: {
id: id
}
});
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现带幻灯的tab滑动切换风格菜单代码
- jQuery实现带幻灯的tab滑动切换风格菜单代码
- Android：简单实现ViewPager+TabHost+TabWidget实现导航栏导航和滑动切换
- Android ViewPager实现滑动切换页面+底部tab点击切换页面（类微信首页）
- Android PagerSlidingTabStrip实现顶部栏目点击或滑动切换
- jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
- 【android】TabActivity实现手指左右滑动切换tab
- jQuery实现带延迟的二级tab切换下拉列表效果
- 实现屏幕切换、滑动-ViewPager详解（二）之--------PagerTitleStrip与PagerTabStrip添加标题栏
- 【android】TabActivity实现手指左右滑动切换tab
- Android技术——视图切换（二）借助ViewPage实现Tab滑动导航
- 使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
- Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面
- 【android】TabActivity实现手指左右滑动切换tab
- jq使用自定义属性实现有title的tab切换
- Fragment嵌套Fragment, TabLayout + ViewPager实现页面切换滑动
- jQuery实现带延迟的二级tab切换下拉列表效果
- Android 使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换