1、解决iOS视频默认全屏播放
//video添加属性：
x5-playsinline="true" webkit-playsinline="true" playsinline="true"
2、在每个字符后面，添加一个字符‘/’
function getString(str) {
arr = str.split('');
for (let i = 0; i arr[i] = arr[i] + "/"
};
arr2 = arr.join('').split('');
if (arr2.length > 0) {
arr2 = arr2.join('').substr(0, arr2.length - 1);
}
return arr2
}
var str = '美食计是傻子';
getString(str)
console.log(getString(str))
3、超出用省略号显示
//spanText这个是文本内容 如果一开始就是一个字符串，就不用将值赋给字符串了
hideText(spanText,num){
var str = spanText;
var len=str.length
if(len>num){
var str2="";
str2=str.substring(0,num)+"...";
}else{
str2 = str;
}
return str2
}
4、 获取地址栏参数
//name 地址栏的参数名
GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //search,查询？后面的参数，并匹配正则
if (r != null) return r[2];
return null;
}
5、Vue中设置时间倒计时（日期格式）
//isEnd: false, //倒计时是否结束
// endTime: '', //应为接口获取到的结束时间
// time: {
// D: '',
// h: '',
// m: '',
// s: ''
// },
//以上三个变量，在vue的data中设置
//设置倒计时
setEndTime() {
var that = this;
// 先调用一次，保证页面在初始化的时候，倒计时就显示
that.timestampToTime();
that.interval = setInterval(that.timestampToTime, 1000);
},
// 格式化日期
timestampToTime() {
var that = this;
//兼容ios的日期格式
that.endTime = that.endTime.replace(/-/g,'/');
var date = (new Date(that.endTime)) - (new Date()); //计算剩余的毫秒数
if (date <= 0) {
that.isEnd = true;
clearInterval(that.interval)
} else {
that.time.D = parseInt(date / 1000 / 60 / 60 / 24, 10);
that.time.h = parseInt(date / 1000 / 60 / 60 % 24, 10);
if (that.time.h < 10) {
that.time.h = "0" + that.time.h
}
that.time.m = parseInt(date / 1000 / 60 % 60, 10); //计算剩余的分钟
if (that.time.m < 10) {
that.time.m = "0" + that.time.m
}
that.time.s = parseInt(date / 1000 % 60, 10); //计算剩余的秒数
if (that.time.s < 10) {
that.time.s = "0" + that.time.s
}
}
}
6、设置html文件title标签中的值
//GetQueryString('title')获取地址栏的参数值
document.title = decodeURIComponent(GetQueryString('title'))
7、日期格式转换为 距离当前时间 多久了
getTimeData(dataTime) {
var currentTime = new Date().getTime();
let forwardTime;
var seconds = parseInt((currentTime - dataTime * 1000) / 60000);
if (seconds < 1) {
forwardTime = '1分钟前'
} else if (seconds < 60 && seconds > 1) {
forwardTime = seconds + '分钟前'
} else if (seconds > 60 && seconds < 1440) {
forwardTime = parseInt(seconds / 60) + '小时前'
} else if (seconds > 1440) {
forwardTime = parseInt(seconds / 1440) + '天以前'
}
return forwardTime
}
8、上拉加载
//获取滚动条当前的位置
getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
},
//获取当前可视范围的高度
getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
},
//获取文档完整的高度
getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
},
//滚动事件触发
window.addEventListener('scroll', () => {
if (this.getScrollTop() + this.getClientHeight() == this.getScrollHeight()) {
//上拉之后的js代码，写在这
。。。。
}
})
9、运行vue-cli的项目
- 检查电脑是否有node 和 npm
node -v /npm -v - 安装node.js
官网下载安装即可
https://nodejs.org/en/download/ - 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
mac安装失败的解决方法：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose - 安装配置项
cnpm install - 运行vue项目
npm run dev
10、vue_cli项目
1、去除路由跳转url后面默认的
image.png
在index.js文件中实例化路由时，添加mode属性
mode: 'history',
image.png
2、解决页面跳转之后当前页面依旧保持原页面的可视区域，不能从当前页面的顶部开始预览
在index.js文件中实例化路由时，添加方法 scrollBehavior 图片如上图，代码如下：
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
11、怎么让position:fixed相对于父元素定位
position:fixed 正常来说是相对于浏览器窗口定位的，如何让position:fixed 相对于父元素定位？
给父元素加上 transform: scale(1,1)或者是别的,只要transform 的属性不是none就行
