j***@163.com
j***@163.com
  • 发布:2017-07-21 09:45
  • 更新:2017-10-23 11:13
  • 阅读:2383

底部凸起大图标DEMO与statusbar(沉浸式)冲突

分类:HTML5+
8.8.1.201707210235-alpha版中,创建“底部选项卡模板”,不修改情况下,在Android和IOS平台下均正常。  

之后我在manifest中增加沉浸式效果:
"plus": {
"statusbar": {
"immersed": "supportedDevice"
},
"launchwebview": {
"statusbar": {
"background": "#00688B"
},

"navigationbar": {//navigationbar
"backgroundcolor": "#00688B",
"titletext": "首页",
"titlecolor": "#ff461f",
"type":"transparent",//透明渐变样式
"autoBackButton": false,
"splitLine":{//底部分割线
"color":"#cccccc"
}
},

"bottom": "0px",
"background": "#fff",
结果,在IOS中正常显示,但在Android上,凸起图标位置不对,似乎顶部位置被状态栏压下去了。

经过测试,只要去掉statusbar背景色的代码,就可以正常显示,但这样页面就直接通顶了。  

"statusbar": {
"background": "#00688B"
},

我的问题是:这种自定义凸起图标模板是否支持沉浸模式?如果支持,该如何写?  
另外,这个模板的圆顶部似乎被切了一下,不是圆弧,IOS下尤其明显。  
2017-07-21 09:45 负责人:无 分享
已邀请:
n***@gmail.com

n***@gmail.com

我直接运行你的demo,并没有出现你说的位置下压的现象,你是在什么手机上运行的?
另外 模板圆顶部分问题,你可以通过对包含圆弧的view空间加一像素的高度,然后红色背景对应的tag 的top值相应加一像素,就是类似将红色背景下移一像素,就可以解决这个问题了。

  • j***@163.com (作者)

    感谢你的回复。demo中,我把launchwebview中的statusbar删除了,这种情况是正常的,你可以在launchwebview中加上如下代码测试一下(这个写法参考自http://ask.dcloud.net.cn/article/1150):

    "statusbar": {

    "background": "#00688B"

    }


    我测试用的手机是三星SM-T800,Android6.0.1;

    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    不过这个问题你可以不再关注,因为我的ttabbar改成不在launchwebview中。

    如果方便,请帮我看一下下面这个问题@697 :

    http://ask.dcloud.net.cn/question/44891


    我在main.html中采用原生tabbar,创建四个子页,第一个子页采用状态栏透明(沉浸式),

    var indexStyle = {

    top: '0px',

    bottom: '51px',

    statusbar:{

    background: "#66CD00"

    },

    titleNView: {

    'backgroundColor': '#66CD00',

    'titleText': "污水处理",

    'titleColor': '#000000',

    type: 'transparent',

    autoBackButton: false,

    splitLine: { //底部分割线

    color: '#cccccc',

    height: '1px'

    },

    buttons: [{ //菜单按钮

    'float': 'left',

    fontSrc: '_www/fonts/mui.ttf',

    text: '\ue563',

    onclick: util.openMenu //指定函数的上下文为mainView,否则是当前这个对象;

    },{ //设置按钮

    'float': 'right',

    fontSrc: '_www/fonts/mui.ttf',

    text: '\ue502',

    onclick: util.openSetting

    }]

    }

    };


                    var sub = plus.webview.create(subpages[i], subpages[i], indexStyle);      
    // append到当前父webview
    self.append(sub);

    和那个帖子一样,IOS下,self.append(sub);后,子页面的标题栏和状态栏重叠了。DCloud_IOS_XTY的回答我没明白。

    请问是否方便详细解答一下,谢谢!

    2017-07-24 15:21

j***@163.com

j***@163.com (作者)


IOS中首页采用沉浸式,主页(tabbar模式)append首页后,首页的标题栏和状态栏重叠。

指尖上的代码

指尖上的代码

这个问题有解不

指尖上的代码

指尖上的代码

http://ask.dcloud.net.cn/question/48331

n***@gmail.com

n***@gmail.com

添加沉浸式之后,android上会出现中间图标位置下压的问题已经复现并反馈给开发者,谢谢反馈

  • 4***@qq.com

    这个问题现在解决了么

    2017-10-22 16:17

n***@gmail.com

n***@gmail.com

已经修复,可以到github上下载最新的示例代码 点击这里

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