当动态获取数据时,如何在页面加载时,仅显示第一个选项卡的内容,第二、第三选项卡内容为空。
当切换到第二、第三个选项卡时,再动态获取相应内容进行显示。
var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
if (event.detail.slideNumber === 1&&!item2Show) {
//切换到第二个选项卡
//根据具体业务,动态获得第二个选项卡内容;
var content = ....
//显示内容
document.getElementById("item2").innerHTML = content;
//改变标志位,下次直接显示
item2Show = true;
} else if (event.detail.slideNumber === 2&&!item3Show) {
//切换到第三个选项卡
//根据具体业务,动态获得第三个选项卡内容;
var content = ....
//显示内容
document.getElementById("item3").innerHTML = content;
//改变标志位,下次直接显示
item3Show = true;
}
});
2 个回复
GraceUI - www.graceui.com - uni-app 优质前端UI框架
关于轮播组件的视频教程
http://www.hcoder.net/course/info_211.html
Trust - 少说废话
参考Hello mui示例项目中“顶部选项卡-可左右拖动(div)”——tab-with-viewpagerindicator.html例子。
就这样安安静静 (作者)
如果是从数据库中获取的是真数据呢
2016-10-09 10:29