前端处理常见问题整理
最近做一个项目，刚好由我负责前端页面的实现，一直觉得自己得前端水平还是挺不错的，但真正用到项目上我才发现，我还有很多细节需要去学习，所以为了以后少走弯路，决定在这记录一下本次遇到的常见问题。
1、CSS美化滚动条
/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 3px;
/*对垂直流动条有效*/
height: 2px;
/*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(3, 3, 3, .3);
border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
border-radius: 7px;
/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, .3);
background-color: #fff;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
display: none;
}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
display: none;
}
2、设置文字不可被选中复制
这个问题是因为，当一个元素被频繁点击时，会选中元素的文字，为了避免这一问题，可以使用下面的CSS控制:
<div class="select">我不能被选中复制</div>
.select{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
3、vue配合flex布局实现九宫格布局
项目上需要实现6个元素2行3列显示，完整实例代码：
<html>
<head>
<title></title>
<style type="text/css">
.out_flex_div{
display: flex;
flex-direction: column;
border: 1px solid blue;
height: 400px;
}
.inner_flex {
justify-content: space-between;
border: 1px solid black;
display: flex;
width: 100%;
height: 100%;
}
.inner_flex > div {
display: inline-block;
border: 1px solid red;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="out_flex_div">
<div v-for="item, index in numbers" class="inner_flex" v-if="index % 3 === 0">
<div>
{{ numbers[index] }}
</div>
<div v-if="index + 1 < numbers.length">
{{ numbers[index+1] }}
</div>
<div v-if="index + 2 < numbers.length">
{{ numbers[index+2] }}
</div>
</div>
</div>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data () {
return {
numbers: [1,2,3,4,5,6]
}
}
})
</script>
</body>
</html>
实际上实现的原理还算简单，但是理解起来可能稍微有一点点绕。
首先从布局上来看，是flex的嵌套布局，out_flex_div层使用列方向的布局排列，实现行的自适应；inner_flex_div层采用行方向的布局排列，实现行类列的自适应；交叉起来便让整个布局自适应起来了。
所以明白了原理之后只需要配合Vue循环实现下面这种布局就可以了：
<div class="out_flex_div">
<div class="inner_flex_div" >
<div></div>
<div></div>
<div></div>
</div>
<div class="inner_flex_div">
<div></div>
<div></div>
<div></div>
</div>
</div>
部分代码如下：
<div v-for="item, index in numbers" class="inner_flex" v-if="index % 3 === 0">
<div>
{{ numbers[index] }}
</div>
<div v-if="index + 1 < numbers.length">
{{ numbers[index+1] }}
</div>
<div v-if="index + 2 < numbers.length">
{{ numbers[index+2] }}
</div>
</div>
其实原理很简单，就是循环在3的倍数时复制一次本身，而每次复制应该是连续的3个，即第index, index+1, index+2个。于是便衍生出上记完整实例中的代码。
最后用CSS实现flex布局：
.out_flex_div{
display: flex;
/*列方向排列,默认行方向*/
flex-direction: column;
border: 1px solid blue;
height: 400px;
}
.inner_flex {
justify-content: space-between;
border: 1px solid black;
display: flex;
width: 100%;
height: 100%;
}
.inner_flex > div {
display: inline-block;
border: 1px solid red;
width: 100%;
height: 100%;
}
最终效果如图，任意拉伸不会变形：
4、Vue项目在网速不好的时候，有时会一闪而过源码的问题
在CSS开头插入下列css样式，然后在vue绑定的元素上加入v-cloak即可避免：
[v-cloak] {
display: none !important;
}
<div id="app" v-cloak></div>
5、Video标签隐藏相关按钮，全屏、音量、以及右下角的三个点
首先CSS可以隐藏video的全屏和音量：
/* 全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
/* 音量按钮 */
video::-webkit-media-controls-mute-button {
display: none !important;
}
/* 播放按钮 */
video::-webkit-media-controls-play-button {
display: none !important;
}
/* 当前播放时间 */
video::-webkit-media-controls-current-time-display {
display: none !important;
}
/* 剩余时间 */
video::-webkit-media-controls-time-remaining-display {
display: none !important;
}
video标签加入controlslist="nodownload noplaybackrate"可隐藏下载功能和播放速率，加入disablePictureInPicture="true"可禁用画中画功能，三个点中的功能都隐藏了，三个点自然就隐藏了。
<video controlslist="nodownload noplaybackrate" disablePictureInPicture="true" controls></video>
6、记录一下js时间换算的函数
由ss.sss换成hh:mm:ss.sss
convert_time(time_str) {
let result = parseFloat(time_str)
let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
let sss = Math.floor((result * 1000 % 1000));
sss = sss < 10 ? '00' + sss : sss < 100 ? '0' + sss : sss;
return result = h + ":" + m + ":" + s + "." + sss;
}
7、记录layer弹出层的使用心得
首先layer v3.5的单独使用版放在这，有需要的人可以下载:https://download.csdn.net/download/qq_36991535/68239257
- layer官方网站的黑窗口可以调试代码，需要做弹出层或者加载层不依赖画面元素时建议直接在画面上调试好之后拿去用。
- 记录用layer做的一个视频窗口代码, 窗口可拖放可调整大小，整体好看，但是有时会出现视频不自动播放的情况，加入
muted属性静音，可正常加载，最后在回调中取消静音就好。
let paused_flag = false;
layer.open({
type: 1
,title: false
,content: '<video controlslist="nodownload" disablePictureInPicture="true" id="minVideo" width="100%" height="99%" controls="controls" autoplay muted></video>'
,shade: 0
,btn: false
,closeBtn: 2
,moveOut: true
,move: "#minVideo"
,scrollbar: false
,area: ['90%', '90%']
,success (index, layero) {
}
// 关闭悬浮窗时处理
,cancel (index, layero){
},
// 窗口大小调整时处理
resizing: function(layero){
}
});
整体效果：
- layer加载层的使用
var index = layer.msg(msg, {
icon: 16
,content: "<span id='percent'>" + msg + "</span>"
,shade: 0.3
,time: false,
anim: 4
});
8、html播放本地音视频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video controls="controls" id="video" width="400px" height="300px"></video>
<input type="file" onchange="changeFile(this)" >
<script>
function changeFile(ele){
var video = ele.files[0];
console.log(video)
var url = URL.createObjectURL(video);
console.log(url);
document.getElementById("video").src=url;
}
</script>
</body>
</html>
以上就是我本次遇到的一些常见的问题了。后续有新的还会更新。欢迎大家留言探讨！
4189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
