选项卡
23 人关注该话题
在做选项卡上加与不加:class="{ 'btna':count === index }" ,运行结果都一样,是什么总是没弄好 uniapp HBuilderX 选项卡
4***@qq.com 2024-05-12 12:49 发起问题 • 1 人关注 • 0 个回复 • 135 次浏览
uniapp循环出来的选项卡默认怎么选中 uniapp 选项卡
小枫叶 2022-02-27 23:43 回复问题 • 2 人关注 • 1 个回复 • 466 次浏览
求助:webview侧滑菜单与轮播图、选项卡切换的冲突问题 图片轮播 选项卡 侧滑菜单
qq1563204347 2021-09-30 10:35 回复问题 • 4 人关注 • 6 个回复 • 2713 次浏览
webviewgroup偶然性出现滑动界面空白 webviewGroup 选项卡
c***@shijigroup.com 2021-08-17 16:15 回复问题 • 3 人关注 • 3 个回复 • 856 次浏览
web2app 选项卡地址可以配置灵活的吗?例如匹配正则就是对应的选项卡 选项卡
5***@qq.com 2021-04-22 10:17 回复问题 • 4 人关注 • 4 个回复 • 1505 次浏览
有没有碰到在安卓app开发中,使用swiper做选项卡, 单个页面滚动,手松开后 会向上回滚的现象 选项卡
b***@163.com 2021-01-19 19:27 发起问题 • 1 人关注 • 0 个回复 • 594 次浏览
指定跳转选项卡 页面 ,然后数据加载未展示 选项卡
迷茫的七酱 2020-05-26 18:54 发起问题 • 1 人关注 • 0 个回复 • 695 次浏览
请问web2app怎么通过plus.webview获取底部选项卡 选项卡
1***@qq.com 2020-04-23 15:48 回复问题 • 2 人关注 • 1 个回复 • 975 次浏览
选项卡的问题。 底部选项卡 选项卡
9***@qq.com 2020-04-22 05:56 回复问题 • 4 人关注 • 4 个回复 • 968 次浏览
webview选项卡,从其他页面返回选项卡时进入指定选项(暂时不完美解决) 选项卡
chinahappybeer 2020-03-30 03:55 回复问题 • 3 人关注 • 2 个回复 • 1554 次浏览
uniapp顶部选项卡实现 选项卡
DCloud_heavensoft 2020-03-18 05:04 回复问题 • 1 人关注 • 1 个回复 • 3843 次浏览
plus.webview.show()跟plus.webview.hide()无效 选项卡
天国葬魂 2020-03-01 16:17 回复问题 • 17 人关注 • 16 个回复 • 7771 次浏览
在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页面。
```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');
```
```javascript
var createIframe = function (el, opt) {
var elContainer = document.query... 显示全部 »
```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/
```
.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;
}
```
赞同来自: DCloud_UNI_CHB
第二个问题.会触发滑动事件
第二个问题.会触发滑动事件
赞同来自: BoredApe
建议:不用js调整页面高度什么的,不需要隐藏超出部分,mui-group-list-bar部分使用position: fixed,line-height使用系统默认的值或者适当增加一点点,我试了一下,应该不会影响体验效果。
```
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove(&q... 显示全部 »
```
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)
感谢反馈,后面我们会补充上的。
赞同来自: 5个萝卜
==update at 2017.06.26===
示例已发布,参考:[nativeObj模式底部选项卡(包含底部凸起悬浮大图标) + webview模式子窗口 示例教程](http://ask.d... 显示全部 »
==update at 2017.06.26===
示例已发布,参考:[nativeObj模式底部选项卡(包含底部凸起悬浮大图标) + webview模式子窗口 示例教程](http://ask.dcloud.net.cn/article/12602)
赞同来自: Trust
第一点:你的逻辑是先执行showbehind然后又self.append(sub); 过程会有页面层级修改
第二点:就是showBehind仅对非子页面生效。
第一点:你的逻辑是先执行showbehind然后又self.append(sub); 过程会有页面层级修改
第二点:就是showBehind仅对非子页面生效。
赞同来自: nbzhou2013
// append到当前父webview
self.append(sub);
// 初始化隐藏
sub.hide();
// append到当前父webview
self.append(sub);
// 初始化隐藏
sub.hide();
选项卡切换优化 - wap2app教程 选项卡
前端JASON2024-03-01 12:38 评论文章 • 63 个评论 • 55709 次浏览
一个底部选项卡的实现(webview模式) 选项卡
8***@qq.com2021-03-12 23:57 评论文章 • 66 个评论 • 23837 次浏览
mui初级入门教程(二)— html5+ webview 实现底部栏切换用法详解 选项卡 Webview mui
宋随2020-03-07 00:16 评论文章 • 66 个评论 • 143172 次浏览
底部选项卡被输入法撑起问题解决 输入法 选项卡
小生复小生2019-11-04 09:23 评论文章 • 15 个评论 • 8122 次浏览
【示例】webview模式选项卡实现按需加载 选项卡 Webview
2***@qq.com2019-08-23 15:55 评论文章 • 23 个评论 • 9044 次浏览
【文档】wap2app选项卡样式定制 选项卡 wap2app
天使中的魔鬼2019-01-21 11:12 评论文章 • 11 个评论 • 4943 次浏览
利用mui pullrefresh_with_tab模板做动态选项卡遇到的问题 选项卡 动态加载
2***@qq.com2018-10-17 17:45 评论文章 • 1 个评论 • 2196 次浏览
关于顶部选项卡-可左右拖动(webview) 使用webviewGroup.js禁止左右滑动切换页面的解决方案 webviewGroup hellomui HBuilder 滑动 选项卡 Webview mui
细嗅蔷薇2018-04-17 15:41 发表文章 • 0 个评论 • 3604 次浏览
mui切换div模式选项卡横向平移特效(借用mui官方图片轮播特效实现) 切换页面 事件 监听 选项卡 图片轮播
3***@qq.com2017-11-19 01:23 评论文章 • 7 个评论 • 22931 次浏览
修改官方demo选项卡+下拉刷新material风格为默认风格 下拉刷新 选项卡
厦门伊豚信息2018-03-20 11:51 评论文章 • 10 个评论 • 6131 次浏览