就这样安安静静
就这样安安静静
  • 发布:2016-10-09 09:19
  • 更新:2016-10-09 12:23
  • 阅读:2231

slide(轮播组件)

分类:MUI

当动态获取数据时,如何在页面加载时,仅显示第一个选项卡的内容,第二、第三选项卡内容为空。
当切换到第二、第三个选项卡时,再动态获取相应内容进行显示。

复制代码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;  
  }  
});
2016-10-09 09:19 负责人:无 分享
已邀请:
GraceUI

GraceUI - www.graceui.com - uni-app 优质前端UI框架

Trust

Trust - 少说废话

参考Hello mui示例项目中“顶部选项卡-可左右拖动(div)”——tab-with-viewpagerindicator.html例子。

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容