本文已参与「新人创作礼」活动，一起开启掘金创作之路
以下记录自己实际项目开发过程中遇到的
css问题 及解决方案：
- h5这个标签的样式不知道在哪里，很诡异就是改不掉也找不到，important也没用
——用行内样式解决
- ios，手机字体看起来像是加粗的，确实默认字体会有这个问题。android和window也有
- 微信h5，h5项目的页面会有一个外边距，而且是在页面挂载之后有个动画之后产生的
——用fixed解决的，很诡异——会导致整个页面没法滚动——最根本的原因是fue-pullback-container showback元素会加上.wx的样式，会加上padding-top一个上边距
——页面挂载之后有个动画修改了新组件的高度，需要initstyle直接js修改高度，也很诡异
- vue里面子元素使用了scoped，样式就不会影响到父元素上，但是父元素的样式也无法影响子元素
- scrollTo 滚动距离计算
- scrollTo(0,0)为啥不行呢.position relative也不行 ————找错元素了
- view的高度动画
// const pandoraBox = document.getElementsByClassName('pandora-box')[0];\
// pandoraBox ? pandoraBox.style['min-height']=document.documentElement.clientHeight + 'px':''
const el = this.$root.$refs.view.$el;\
el.classList.remove('position-relative');\
el.style['min-height'] = document.documentElement.clientHeight + 'px';
- 进度条
.progress {
display: flex;
flex-direction: column;
width: 100%;
border-radius: 0.262rem;
overflow: hidden;
.cal {
display: flex;
flex-direction: row;
.fill {
background-color: #eb5f93;
height: 0.522rem;
}
.unfill {
background-color: #3d1662;
height: 0.522rem;
margin-left: auto;
flex-grow: 1;
}
}
ul {
width: 100%;
height: 0.522rem;
display: flex;
flex-grow: 1;
background-color: transparent;
margin-top: -0.522rem;
li {
// border-right:0.0217rem solid #1d043d ;
border-right: 0.0217rem solid #fff; background-color: transparent; flex-grow: 1;
&:last-child {
border-right: 0;
}
}
}
}
-
nth-child() 好像是从第1个开始数的，不是第0个，因为10个li选择第9个li，结果就是第9个
-
safari调试手机，样式修改，手机没有生效，但其实浏览器已经生效了
- 手机上的safari只能展示的第1页，后面都显示不出来。mac电脑上的safari是没有问题的
因为mac上是embed标签，ios是img标签，浏览器也是embed标签，安卓直接下载了
- 页面直接显示pdf：< iframe >、< embed >、< object >、PDFObject、PDF.js——最后用的iframe
\
- iframe显示pdf隐藏下载和打印按钮：在嵌入的地址后面加’#toolbar=0’就可以了 blog.csdn.net/c_qianxia50…
<iframe
id="iframe2"
:src="JiaoanPdfUrl+'#toolbar=0'"
ref="ifr2"
frameborder="0"
width="100%"
:height="height"
scrolling="auto"
></iframe>
-
iframe显示pdf，滑动的时候回会出现滚动轴，隐藏不了这个
-
iframe高度没有自适应，需要根据body或者容器高度自己计算——最后实现是在出现点击出现iframe的函数里计算高度并赋值
displayStipulation() {
const vm = this;
const rem = parseFloat(document.documentElement.style.fontSize, 10);
let height1 = document.getElementById('pop-content').clientHeight;
vm.showStipulation = true;
vm.$nextTick(() => {
document.getElementById('ifm').style.height = height1 - 3.783 * rem + 'px';
});
},
- 需求是希望在pdf文件加载出来之前显示loading组件，加载成功之后显示pdf。但因为不是请求，而是直接点击打开pdf链接，这个好像做不了。了解了下pdf拿到后的数据流也跟别人不一样，需要特殊处理的
——iframe自己就有onload事件
用假img标签来加载src，load成功后，浏览器有缓存再去看iframe的方法不可行，因为img没法加载pdf链接，会走进onerror里面
