本文介绍如何在Apicloud中实现动态获取tab标签内容并进行宽度分配，当标签数量超过5个时，根据宽度进行滚动展示。代码示例展示了如何处理点击切换事件，并提供了动态创建和显示Tab的详细步骤。
1、win页面动态获取标签内容，如果tab标签的个数超过5个，按照每个标签60px的宽度分配宽度，如果没有超过5个，则根据个数进行平均分配，超过6个标签，可以进行左右滑动，点击可切换。代码如下：
<!-- 商品列表-->
<!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/api.css" />
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../../css/aui.2.0-override.css" />
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" v-cloak>
<div id="aui-header" style="background:#fff !important">
<header class="aui-bar aui-bar-nav aui-bar-theme">
<a class="aui-pull-left" tapmode οnclick="closeWin();">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">物料采购</div>
</header>
<div class="aui-content" id="headerTab">
<div style="width:375px;overflow-x:scroll;">
<div class="aui-tab" :style="{width:winWidth+'px'}">
<template v-for="(item,index) in tabList">
<div :style="{ width: divWidth + 'px' }" class="aui-tab-item" :class="index==nowIndex?'aui-active':''" :data-index="index" tapmode οnclick="tabSwitch(this)">
{{item.name}}
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../../script/vue.js"></script>
<script type="text/javascript">
apiready = function() {
//初始化数据
initializeData();
//获取分类列表
getGoodsTypeList();
//优化点击事件处理
api.parseTapmode();
//适配系统状态栏，为传入的DOM元素增加20px的上内边距
SetstatusBarStyle();
//处理刘海屏
if (api.deviceModel == 'MIX 2') {
// alert(api.deviceModel);
var div = document.getElementById('aui-header');
div.className = 'aui-margin-t-20';
};
};
/**
* 初始化数据
*/
var app;
function initializeData() {
app = new Vue({
el: '#wrap',
data: {
curPageData: null,
tabList: [{ }], //分类名称列表
nowIndex: 0, //当前页下标
divWidth: 0, //宽度
winWidth: 0, //外层容器宽度
}
});
}
/**
* tab标签切换
*/
function tabSwitch(obj) {
var frameIndex = $(obj).data("index");
app.nowIndex = frameIndex;
api.setFrameGroupIndex({
name: 'meteriel',
index: frameIndex,
scroll: true,
});
}
/**
* 获取分类列表
*/
function getGoodsTypeList() {
//获取直接邀请人列表
var tabList = [];
var url =url;
var bodyParam = {
PageNumber: 1, //当前页数
PageSize: 100, //每页行数
}
ajaxRequest(url, 'post', bodyParam, function(ret, err) {
if (ret) {
if (ret.ERROR_CODE == -1) {
//数据填充
var frames = [];
var tabList = [];
for (var i = 0; i < ret.DATA.rows.length; i++) {
tabList.push({
name: ret.DATA.rows[i].GoodsTypeName
})
frames.push({
name: 'materielList_frm' + i,
url: 'materielList_frm.html',
bounces: false,
pageParam: {
state: ret.DATA.rows[i].GoodsTypeID
}
})
}
app.tabList = tabList;
var length = ret.DATA.rows.length;
if (length < 5) {
app.winWidth = api.winWidth
app.divWidth = api.winWidth / length
}
if (length >= 5) {
app.winWidth = ret.DATA.rows.length * 200
app.divWidth = app.winWidth / length
}
//打开frm页面
api.openFrameGroup({
name: 'meteriel',
background: '#FFF',
scrollEnabled: false,
rect: {
x: 0,
y: $api.dom('#aui-header').offsetHeight,
w: 'auto',
h: $api.dom('#wrap').offsetHeight - $api.dom('#aui-header').offsetHeight
},
index: 0,
preload: 0, //预加载的 frame 个数，默认加载当前页后面一个，默认值为 1；
frames: frames
}, function(ret) {
});
//解析元素 tapmode 属性，优化点击事件处理
api.parseTapmode();
} else {
api.alert({
msg: ret.ERROR_MESSAGE
});
}
} else {
api.alert({
msg: err.msg
});
}
api.hideProgress();
});
}
//关闭当前窗口
function closeWin() {
api.closeWin()
}
</script>
</html>
2、frm页面进行内容的获取和显示：
<!-- 商品列表 -->
<!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/api.css" />
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../../css/aui.2.0-override.css" />
<style>
.materiel {
border-radius: 5px;
background: #fff;
margin-bottom: 10px;
box-shadow: 2px 2px 10px #E0E0E0;
padding: 15px;
}
.aui-list {
position: relative;
font-size: 0.8rem;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
}
.noData {
width: 5rem;
height: 5rem;
position: absolute;
border: 1px solid red;
left: 62.5%;
top: 50%;
margin: -5rem 0 0 -5rem
}
.materiel-price {
color: #008cff;
text-align: right;
}
.material-img {
width: 100%;
height: 5.5rem;
margin-bottom: 5px;
}
.material-img img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
<div id="main" class="flex-con" v-cloak>
<div class="aui-content aui-margin-b-15" v-if="curPageData !=null">
<ul class="aui-list aui-media-list">
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-row aui-row-padded">
<template v-for="item in curPageData">
<div class="aui-col-xs-6" :data-id="item.GoodsID" tapmode οnclick="openMaterialDetail(this);">
<div class="materiel">
<div class="material-img">
<img :src="commonImgUrl+item.GoodsImages" />
</div>
<div class="material-goods">
<div class="aui-font-size-14 aui-ellipsis-1 aui-margin-b-5">{{item.GoodsName}}</div>
<div class="aui-font-size-12 aui-ellipsis-1" style="color:#888;height:20px">{{item.Describe}}</div>
</div>
<div class="aui-font-size-16 materiel-price">
<span class="aui-font-size-12">￥</span>
<span class="">{{item.GoodsPrice}}</span>
</div>
</div>
</div>
</template>
</div>
</div>
</li>
</ul>
</div>
<!-- 暂无数据-->
<div class="aui-notice" v-show="total<=0">
<div class="aui-show">
<div class="aui-content aui-margin-b-15 aui-margin-t-15">
<div class="aui-img-content-null aui-margin-b-10">
<img src="../../../image/icon/notice-1.png">
</div>
<div class="aui-text-center aui-text-default aui-font-size-16">暂无数据~</div>
</div>
</div>
</div>
<!-- 下拉加载更多-->
<div class="aui-loading-wrap" v-show="totalPage>1">
<p v-text="pullLoad">下拉加载更多</p>
</div>
<!-- 已经到底啦-->
<!-- <div class="aui-loading-wrap" >
<p >已经到底啦</p>
</div> -->
</div>
</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../../script/vue.js"></script>
<script type="text/javascript">
apiready = function() {
//初始化数据 - 第一步
initializeData();
//加载数据 - 第二步
loadData();
// 下拉刷新 - 第三步（可选）
api.setRefreshHeaderInfo({
visible: true,
bgColor: 'rgba(0,0,0,0)',
textColor: '#666',
textDown: '数据加载中...',
textUp: '加载成功',
showTime: true
}, function(ret, err) {
app.whetherToLoading = false;
app.pullLoad = '下拉加载更多';
app.page = 1;
loadData();
//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
api.refreshHeaderLoadDone();
});
//上拉加载新一页数据 - 第三步（可选）
if (app.whetherToLoading == false) {
//上拉加载新一页数据
api.addEventListener({
name: 'scrolltobottom',
extra: {
threshold: 20 //设置距离底部多少距离时触发，默认值为0，数字类型
}
}, function(ret, err) {
app.page = app.page + 1;
if (app.totalPage > 0) {
if (app.totalPage >= app.page) {
app.whetherToLoading = true; //加载中提醒显示
loadData();
} else {
app.whetherToLoading = true; //加载中提醒显示
app.pullLoad = '我还是有底线的'; //加载中提醒显示
};
}
});
}
//优化点击事件处理
api.parseTapmode();
}
/**
* 初始化数据
*/
var app;
function initializeData() {
app = new Vue({
el: '#wrap',
data: {
curPageData: null,
commonImgUrl: common_img_url, //图片路径
page: 1, //当前页数
pageNum: 10, //每页行数
total: -1, //总行数
totalPage: 0, //总页数
whetherToLoading: false, //页面是否在加载中
pullLoad: "下拉加载更多",
}
});
}
/**
* 获取产品列表
*/
function loadData() {
if (app.page > 1) {
app.whetherToLoading = true; //数据正在加载中,分页里边页面中，必要字段，避免重复加载
} else {
//加载中提示
api.showProgress({
title: '加载中...',
text: '请稍后...',
modal: false
});
};
var url = url;
var bodyParam = {
GoodsTypeID: api.pageParam.state,
UserID: $api.getStorage('UserID'),
PageNumber: app.page, //当前页数
PageSize: app.pageNum, //每页行数
};
ajaxRequest(url, 'post', bodyParam, function(ret, err) {
if (ret) {
if (ret.ERROR_CODE == -1) {
//数据填充
if (app.page == 1) {
app.curPageData = ret.DATA.rows;
} else {
app.curPageData = app.curPageData.concat(ret.DATA.rows);
}
//总行数
app.total = ret.DATA.total;
//总页数
app.totalPage = ret.DATA.pageCount;
app.whetherToLoading = false;
} else {
api.alert({
msg: ret.ERROR_MESSAGE
});
}
} else {
api.alert({
msg: err.msg
});
}
api.hideProgress();
app.whetherToLoading = false;
});
}
/**
* 打开商品详情页面
*/
function openMaterialDetail(obj) {
var goodsID = $(obj).data("id");
api.openWin({
name: 'materielDetail',
url: './materielDetail_win.html',
bounces: false,
pageParam: {
GoodsID: goodsID
}
});
}
</script>
</html>
3、示例效果图
2886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
