选项卡

选项卡

21 人关注该话题

求助:webview侧滑菜单与轮播图、选项卡切换的冲突问题 图片轮播 选项卡 侧滑菜单

分类: MUI 849772651@qq.com 2 天前  回复问题 • 4 人关注 • 5 个回复 • 1374 次浏览

mui上拉加载未到底部也触发 选项卡 上拉加载 mui

分类: MUI 倾盖若新 2019-12-31 11:51  回复问题 • 11 人关注 • 10 个回复 • 2526 次浏览

#插件需求# 兼容微信小程序、H5、APP的原生NavBar选项卡 原生 选项卡 插件需求

分类: uni-app DCloud_heavensoft 2019-12-10 16:05  回复问题 • 2 人关注 • 1 个回复 • 48 次浏览

webviewgroup偶然性出现滑动界面空白 webviewGroup 选项卡

分类: MUI Wape丶Aroudy 2019-12-04 11:53  发起问题 • 1 人关注 • 0 个回复 • 37 次浏览

【报Bug】tabbar配置导致非tabbar页面出现显示错误 uniapp 选项卡

分类: uni-app DCloud_UNI_王亚琪 2019-11-21 10:40  回复问题 • 2 人关注 • 2 个回复 • 271 次浏览

【报Bug】底部选项卡-webview模式 默认加载最后一个webview 选项卡

分类: HBuilderX 43130726@qq.com 2019-11-06 09:21  回复问题 • 5 人关注 • 3 个回复 • 74 次浏览

两种不同的tabbar选项卡混用,出现了错位问题 选项卡 tabbar

分类: MUI thesmallwhiteme@163.com 2019-10-26 14:38  回复问题 • 4 人关注 • 4 个回复 • 898 次浏览

wap2app是不是已经放弃 选项卡

分类: wap2app 回梦無痕 2019-10-20 01:43  回复问题 • 2 人关注 • 1 个回复 • 163 次浏览

选项卡切换优化 Can't find variable: TabBarfile 选项卡 wap2app

分类: wap2app 腾越 2019-09-29 12:56  回复问题 • 1 人关注 • 3 个回复 • 109 次浏览

选项卡的问题。 底部选项卡 选项卡

分类: wap2app 782711659@qq.com 2019-09-17 14:55  回复问题 • 3 人关注 • 3 个回复 • 277 次浏览

plus.webview.show()跟plus.webview.hide()无效 选项卡

分类: 5+ SDK slime 2019-09-02 15:06  回复问题 • 15 人关注 • 15 个回复 • 5511 次浏览

更多...
0

赞同来自:

错误原因:

在setting.html里边你重新openWindow创建了一个新的login.html。导致home,tab又重新创建了一遍。

解决方案:
在setting.html注销登录的地方,plus.webview.getWebviewById('... 显示全部 »
错误原因:

在setting.html里边你重新openWindow创建了一个新的login.html。导致home,tab又重新创建了一遍。

解决方案:
在setting.html注销登录的地方,plus.webview.getWebviewById('page-login').show();获取已存在的login.html直接进行show即可。

建议可以找一个4.4以上的手机。通过chrome来调试。可以很方便直观的看到目前创建的webview页面。
0

赞同来自:

我贴一下代码,让后面的同学参考:

```javascript
<div class="mui-scroll">
<a class="mui... 显示全部 »
我贴一下代码,让后面的同学参考:

```javascript
<div class="mui-scroll">
<a class="mui-control-item mui-active" href="#item1mobile">未跟进</a>
<a class="mui-control-item" href="#item2mobile">跟进中</a>
<a class="mui-control-item" href="#item3mobile" id="defaultTab">搁置</a>
<a class="mui-control-item" href="#item4mobile">成功</a>
<a class="mui-control-item" href="#item5mobile">无效</a>
<a class="mui-control-item" href="#item6mobile">失败</a>
</div>

```

```javascript
//切换到指定的选项卡
mui.trigger(document.getElementById("defaultTab"), 'touchstart');
mui.trigger(document.getElementById("defaultTab"), 'tap');

```
0

赞同来自:

用iframe代替多子webview形式的tabbar在浏览器的兼容处理方法:
```javascript
var createIframe = function (el, opt) {
var elContainer = document.query... 显示全部 »
用iframe代替多子webview形式的tabbar在浏览器的兼容处理方法:
```javascript
var createIframe = function (el, opt) {
var elContainer = document.querySelector(el);
var wrapper = document.querySelector(".mui-iframe-wrapper");
if(!wrapper){
// 创建wrapper 和 iframe
wrapper = document.createElement('div');
wrapper.className = 'mui-iframe-wrapper';
for(var i in opt.style){
wrapper.style[i] = opt.style[i];
}
var iframe = document.createElement('iframe');
iframe.src = opt.url;
iframe.id = opt.id || opt.url;
iframe.name = opt.id;
wrapper.appendChild(iframe);
elContainer.appendChild(wrapper);
}else{
var iframe = wrapper.querySelector('iframe');
iframe.src = opt.url;
iframe.id = opt.id || opt.url;
iframe.name = iframe.id;
}
}
```

调用也很简单:
```javascript
//当前激活选项
var activeTab = subpages[Index],title=document.querySelector(".mui-title");
mui('.mui-bar-tab').on('tap', 'a', function(e) {
// 获取目标子页的id
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
// 更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
// 子页内容切换
if(mui.os.plus){
// 显示目标webview
plus.webview.show(targetTab);
// 隐藏当前webview
plus.webview.hide(activeTab);
// 更改当前活跃的选项卡
activeTab = targetTab;
}else{
// 创建iframe代替子页面
createIframe('.mui-content',{
url: targetTab,
style: {
top: '45px',//设置距离顶部的距离
bottom: '50px'//设置距离底部的距离
}
});
}
})
```

可以参考一下这个demo:
预览地址:
https://rawgit.com/zhaomenghuan/mui-demo/master/example/tabbar-with-iframe/tab-webview-main.html
下载地址:
https://github.com/zhaomenghuan/mui-demo/
0

赞同来自:

浏览器默认为body滚动,但是有时候我们需要区域滚动,mui为此封装了一个scroll(区域滚动)组件,区域滚动组件默认为absolute定位,在进行区域滚动的时候我们我们一般会在滚动的节点添加.mui-fullscreen默认为全屏,所以我们需要手动设置滚动... 显示全部 »
浏览器默认为body滚动,但是有时候我们需要区域滚动,mui为此封装了一个scroll(区域滚动)组件,区域滚动组件默认为absolute定位,在进行区域滚动的时候我们我们一般会在滚动的节点添加.mui-fullscreen默认为全屏,所以我们需要手动设置滚动区域的位置,只需要修改一下top和bottom值就可以解决这个问题。
```
.mui-fullscreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
```

你可以在.mui-control-content这个节点添加.mui-fullscreen类,然后设置:
```
.mui-control-content.mui-fullscreen{
top: 50px;
bottom: 0;
}
```
1

赞同来自: DCloud_UNI_CHB

第一个问题请参考文档:[http://dev.dcloud.net.cn/mui/ui/#slide](http://dev.dcloud.net.cn/mui/ui/#slide)
第二个问题.会触发滑动事件
第一个问题请参考文档:[http://dev.dcloud.net.cn/mui/ui/#slide](http://dev.dcloud.net.cn/mui/ui/#slide)
第二个问题.会触发滑动事件
1

赞同来自: 五块钱的果汁

出现这样的原因,应该是你在userlist页面频繁使用document.body.offsetHeight之类的方式获得页面高度,但是在一开始进入的是首页,其他几个页面也是加载出来的,但是不可见,高度为0;所以你点击通讯录,没反应,其实内容是在的,这是被你用o... 显示全部 »
出现这样的原因,应该是你在userlist页面频繁使用document.body.offsetHeight之类的方式获得页面高度,但是在一开始进入的是首页,其他几个页面也是加载出来的,但是不可见,高度为0;所以你点击通讯录,没反应,其实内容是在的,这是被你用overflow: hidden;隐藏起来了,你在通讯录刷新页面,由于其是可见的,高度不是0了,所以,出现:通讯录界面同步下 手机上就显示 这样的情况。
建议:不用js调整页面高度什么的,不需要隐藏超出部分,mui-group-list-bar部分使用position: fixed,line-height使用系统默认的值或者适当增加一点点,我试了一下,应该不会影响体验效果。
2

赞同来自: 陈小仙 yizhi

将onChange中的代码做部分调整即可。
```
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove(&q... 显示全部 »
将onChange中的代码做部分调整即可。
```
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
var target = document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")");
target.classList.add("mui-active");
if(target.scrollIntoView) {
target.scrollIntoView();
}
```

关于scrollIntoView,参考相关api。[Element.scrollIntoView()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)

感谢反馈,后面我们会补充上的。
1

赞同来自: 5个萝卜

本周会发布一个使用nativeobj实现底部凸起的菜单示例

==update at 2017.06.26===
示例已发布,参考:[nativeObj模式底部选项卡(包含底部凸起悬浮大图标) + webview模式子窗口 示例教程](http://ask.d... 显示全部 »
本周会发布一个使用nativeobj实现底部凸起的菜单示例

==update at 2017.06.26===
示例已发布,参考:[nativeObj模式底部选项卡(包含底部凸起悬浮大图标) + webview模式子窗口 示例教程](http://ask.dcloud.net.cn/article/12602)
1

赞同来自: Trust

目前你写的代码无法正常实现,
第一点:你的逻辑是先执行showbehind然后又self.append(sub); 过程会有页面层级修改
第二点:就是showBehind仅对非子页面生效。
目前你写的代码无法正常实现,
第一点:你的逻辑是先执行showbehind然后又self.append(sub); 过程会有页面层级修改
第二点:就是showBehind仅对非子页面生效。
1

赞同来自: nbzhou2013

更新为HBuilder 最新版本,并卸载手机上hbuilder重新真机运行查看效果
更新为HBuilder 最新版本,并卸载手机上hbuilder重新真机运行查看效果
0

赞同来自:

修改一下JS tab页面for循环创建时修改一下 先append在hide 暂时可以绕过
// append到当前父webview
self.append(sub);
// 初始化隐藏
sub.hide();
修改一下JS tab页面for循环创建时修改一下 先append在hide 暂时可以绕过
// append到当前父webview
self.append(sub);
// 初始化隐藏
sub.hide();
更多...

mui初级入门教程(二)— html5+ webview 实现底部栏切换用法详解 选项卡 Webview mui

分类: MUI m17768018510@163.com2019-12-06 15:26  评论文章 • 65 个评论 • 82511 次浏览

【示例】webview模式选项卡实现滑动切换 示例 选项卡 技术分享 Webview

分类: HTML5+ pengzzp@126.com2019-11-22 17:29  评论文章 • 33 个评论 • 21430 次浏览

选项卡切换优化 - wap2app教程 选项卡

分类: wap2app pyh2019-11-14 13:54  评论文章 • 47 个评论 • 32287 次浏览

底部选项卡被输入法撑起问题解决 输入法 选项卡

分类: MUI 小生复小生2019-11-04 09:23  评论文章 • 15 个评论 • 5348 次浏览

一个底部选项卡的实现(webview模式) 选项卡

分类: MUI 335190153@qq.com2019-09-19 12:06  评论文章 • 64 个评论 • 16917 次浏览

【示例】webview模式选项卡实现按需加载 选项卡 Webview

分类: HTML5+ 2776332953@qq.com2019-08-23 15:55  评论文章 • 23 个评论 • 5684 次浏览

【文档】wap2app选项卡样式定制 选项卡 wap2app

分类: wap2app 天使中的魔鬼2019-01-21 11:12  评论文章 • 11 个评论 • 2226 次浏览

利用mui pullrefresh_with_tab模板做动态选项卡遇到的问题 选项卡 动态加载

分类: MUI 2226234628@qq.com2018-10-17 17:45  评论文章 • 1 个评论 • 955 次浏览

返回按键 选项卡 外部网站 打包 Webview html

分类: HTML5+ 初樰2017-10-19 13:41  评论文章 • 2 个评论 • 1509 次浏览

修改官方demo选项卡+下拉刷新material风格为默认风格 下拉刷新 选项卡

分类: MUI 请输入用户名2018-03-20 11:51  评论文章 • 10 个评论 • 4365 次浏览

更多...