picker组件开发问题记录

2018-01-12 本文已影响31人 BubbleM

Q：移动端禁止弹出层背景滚动
方案一： document.body.style.overflow = 'hidden';

image.png
PC上有效果，在移动端背景依然可以滚动

方案二：
document.getElementsByTagName('html')[0].style.overflow = 'hidden';

方案三：

document.getElementsByTagName('html')[0].style.overflow = 'hidden';
document.body.style.overflow = 'hidden';

image.png

PC和移动端都可以禁止背景滚动，但是每次背景都会弹回到最顶部

方案四：

document.body.addEventListener('touchmove',this.stopScroll)
document.body.style.overflow = 'hidden';

移动端阻止touchmove事件即可。参考

Q：picker组件Top的高度值应该重新计算
场景：

底部弹窗最终效果

获取li高度来动态的设置滚动距离

获取高度
实际结果

// 获取li高度并存入缓存
        let liNode = childs[1].getElementsByTagName('li')[0];
        self.cacheMsg.distance = liNode.getBoundingClientRect().height;
        console.log(window.getComputedStyle(liNode).height); // 43.9375px
        console.log(self.cacheMsg.distance); // 43.9375
        console.log(liNode.offsetHeight); // 44

<div id = 'main' style="height: 300px;">Height</div>
#main{
    width: 100px;
    height: 100px;
    background: red;
    padding: 10px;
    margin: 5px;
    border: 1px solid red;
}

通过height获取高度document.getElementById("id").style.height(需要这样设置才能获取到高度，<div id="idName" style="height:300px;">),这时获取到的高度是300px;,注意element.style获取到的高度是未经过计算的。
通过window.getComputedStyle(document.getElementById("main")).height;获取元素高度。行内样式优先，获取到的是300px如果没有行内样式获取到是100px。getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
语法：var style = window.getComputedStyle("元素", "伪类");

getComputedStyle()与element.style的区别：getComputedStyle()是只读的，方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style可读可写，但是只能获取到style属性中的样式。

通过offsetHeight获取高度不受行内样式的影响，获取到是122px会加入元素的height+padding+border。表示是自身的高度,如果有设置boder的话还应该加上boder的值。
通过clientHeight获取高度是120px是计算height+padding。可见区域的宽度,不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度,正常的是17px。
通过dom.getBoundingClientRect().height获取到的高度和offsetHeight一样是122px,不同的是通过offsetHeight等获取到的高度是经过四舍五入的，但是通过getBoundingClientRect()可以获得精确值，且兼容IE8.

Q：背景透明度的坑
设置背景透明度不要直接用opcity尽量使用background: rgba(0, 0, 0, 0.6); 因为opcity有继承性。
找到页面“点透”问题产生的原因，是因为设置了li元素的:active属性时候改变透明度。

页面异常

Q：如何设置蒙版导致背景字体也变暗。
目标效果如下：

目标效果
先后渲染的效果

放在上面
由于markTop和markBottom两个浮层都是有absolate布局，如果二者放在pickerWheel之上会导致mark两个浮层先渲染浮动到上面和下面，然后pickerWheel再渲染定位会覆盖在两个浮层的上面，效果如下

mark先渲染

放在下面

image.png
使用background: linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,.4));
http://www.css88.com/book/css/values/image/linear-gradient().htm

Q：块级元素实际是有高度的，但是通过offsetHeight或者clientHeight设置的时候显示都为0.

image.png

原因是因为设置了display:none;不占位置空间导致的。
获取元素高度还可以通过getBoundingClientRect(),可以获取到元素的各个方向上的高度。

picker组件开发问题记录

猜你喜欢

热点阅读