起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2016|回复: 6

[结贴] 关于popover底部停靠还有30px空间的问题

[复制链接]

8

主题

43

帖子

149

积分

初级会员

Rank: 2

积分
149
QQ
发表于 2017-11-16 17:04:08 | 显示全部楼层 |阅读模式
如下图所示,不能完全停靠在最低部,搞不懂什么鬼。

捕获.PNG

我看了一下popover.js,在154行位置有个var borderSize = 30;搞不明白,这个borderSize是什么??
具体的代码是这样的
  1. var borderSize = 30;
  2.                         switch(this.position){
  3.                         case 'center':
  4.                                 this.$content.css({
  5.                                         'margin-left': -(Math.min(this.$content.width(),ww))/2,
  6.                                         'margin-top': -(Math.min(this.$content.height(),wh))/2,
  7.                                         top: '50%',
  8.                                         left: '50%',
  9.                                         right: 'auto',
  10.                                         bottom: 'auto',
  11.                                         'max-height': wh-borderSize
  12.                                 });
  13.                                 break;
  14.                         case 'bottom':
  15.                                 this.$content.css({
  16.                                         'margin-left': -(Math.min(this.$content.width(),ww))/2,
  17.                                         top: 'auto',
  18.                                         left: '50%',
  19.                                         right: 'auto',
  20.                                         bottom: borderSize,
  21.                                         'max-height': wh-borderSize
  22.                                 });
  23.                                 break;
  24.                         case 'left':
  25.                                 this.$content.css({
  26.                                         'margin-top': -(Math.min(this.$content.height(),wh)) / 2,
  27.                                         'margin-left': 0,
  28.                                         top: '50%',
  29.                                         left: borderSize,
  30.                                         right: 'auto',
  31.                                         bottom: 'auto',
  32.                                         'max-height': wh-borderSize
  33.                                 });
  34.                                 break;
  35.                         case 'right':
  36.                                 this.$content.css({
  37.                                         'margin-top': -(Math.min(this.$content.height(),wh)) / 2,
  38.                                         'margin-left': 0,
  39.                                         top: '50%',
  40.                                         left: 'auto',
  41.                                         right: borderSize,
  42.                                         bottom: 'auto',
  43.                                         'max-height': wh-borderSize
  44.                                 });
  45.                                 break;
  46.                         default:
  47.                                 this.$content.css({
  48.                                         'margin-left': -(Math.min(this.$content.width(),ww)) / 2,
  49.                                         top: borderSize,
  50.                                         left: '50%',
  51.                                         right: 'auto',
  52.                                         bottom: 'auto',
  53.                                         'max-height': wh-borderSize
  54.                                 });
  55.                                 break;
  56.                         }
复制代码



发表于 2017-11-16 17:20:11 | 显示全部楼层
你是使用了panel组件对吧!
如果存在bottom 就会不遮住! 代码中不是判断了        case 'bottom': 吗??
如果想这遮住。可以吧panel组件的 bottom删除掉!
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

8

主题

43

帖子

149

积分

初级会员

Rank: 2

积分
149
QQ
 楼主| 发表于 2017-11-16 17:39:06 | 显示全部楼层
liangyongfei 发表于 2017-11-16 17:20
你是使用了panel组件对吧!
如果存在bottom 就会不遮住! 代码中不是判断了        case 'bottom': 吗??
如果想 ...

捕获.PNG


所有用的panel的bottom底部都给我删了!还是会出现30px
回复 支持 反对

使用道具 举报

发表于 2017-11-16 18:03:12 | 显示全部楼层
54alin 发表于 2017-11-16 17:39
所有用的panel的bottom底部都给我删了!还是会出现30px

你是哪个版本啊?‘
本地测试  3.7版本,测试案例
/UI2/system/components/justep/popOver/demo/base.w

是全屏都遮住了的!

要不你把你的例子发来,本地测试看下!
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

8

主题

43

帖子

149

积分

初级会员

Rank: 2

积分
149
QQ
 楼主| 发表于 2017-11-16 18:12:00 | 显示全部楼层
liangyongfei 发表于 2017-11-16 18:03
你是哪个版本啊?‘
本地测试  3.7版本,测试案例
/UI2/system/components/justep/popOver/demo/base.w

我的是3.7版本,我把demo改成底部,结果一样有30px

1.PNG 捕获.PNG


回复 支持 反对

使用道具 举报

发表于 2017-11-17 09:36:07 | 显示全部楼层
54alin 发表于 2017-11-16 18:12
我的是3.7版本,我把demo改成底部,结果一样有30px

我指的是遮罩 会全部遮住
opacity  设置为1就可以看到效果!

不过这个class x-popOver-content 的div  上style元素会 会动态生成的属性!  默认是留了一个30px的边距 的!这样会好看一些,能看出是遮罩,如果都挡住了,还知道是遮罩吗??那你就用windowDialog吧!

或者自己用js动态修改 class是
x-popOver-content  的 的dom节点,style属性的值!


  1. this.getElementByXid('divXid').style.bottom= '0px';
复制代码
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

8

主题

43

帖子

149

积分

初级会员

Rank: 2

积分
149
QQ
 楼主| 发表于 2017-11-17 20:02:06 | 显示全部楼层
liangyongfei 发表于 2017-11-17 09:36
我指的是遮罩 会全部遮住
opacity  设置为1就可以看到效果!

解决了!!谢谢了!!
还有,如果要预留30px,还不如直接用windowDialog!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 05:24 , Processed in 0.060906 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表