下雨咯
下雨咯
  • 发布:2017-12-20 09:48
  • 更新:2017-12-20 12:18
  • 阅读:1336

底部选项卡横屏适配问题

分类:MUI

请问这怎么解决

2017-12-20 09:48 负责人:无 分享
已邀请:
下雨咯

下雨咯 (作者) - 谢绝私聊

@DCloud_MUI_FXY @DCloud_heavensoft

n***@gmail.com

n***@gmail.com

复制代码// 监听设备是否横竖屏  
window.addEventListener('resize', function(e) {  
    var orientation = window.orientation,  
           width = window.innerWidth;  
        if(orientation == 0 || orientation == 180) {  
            //竖屏  
            leftPos = Math.ceil((window.innerWidth - 60) / 2);  
            drawNativeIcon.setStyle({  
                bottom: '5px',  
                left: leftPos + 'px',  
                width: '60px',  
                height: '60px'  
            });  

        } else if(orientation == 90 || orientation == -90) {  
            // 横屏  
            leftPos = Math.ceil((window.innerWidth - 60) / 2);  
            drawNativeIcon.setStyle({  
                bottom: '5px',  
                left: leftPos + 'px',  
                width: '60px',  
                height: '60px'  
            });  
        }  
});
  • n***@gmail.com

    已经升级了 明天就会更新

    2017-12-20 14:53

  • 下雨咯 (作者)

    回复 n***@gmail.com:大佬,这个监听很有效,虽然M图标的坐标没有问题了,但是tabbar和页面不对应,甚至第二个tabbar不能点击。 另外我试了你更新在GitHub上的代码,效果依然如我所说,我觉得大佬你可能只把重点放在M上了 没有去试着点一下其他的tabbar。期待回复。

    2017-12-21 16:49

3***@qq.com

3***@qq.com

mui tap横屏不是一样自适配的吗,如果你要适配高度,不要用px单位,bottom: $(".mui-bar-tab").height(); 我底部的高度都是用rem单位去写的,这样就适配了

  • 下雨咯 (作者)

    看图就明白啦

    2017-12-20 15:09

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

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

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

## 大标题 
### 小标题

斜体 / 粗体 :

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

代码片段 :

``` 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

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

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