HTML
meta参数设置
//页面不设置缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
//允许跨域
<meta http-equiv="Access-Control-Allow-Origin" content="*">
CSS
深度选择器重定义组件库样式
.cube-scroll-wrapper /deep/ .bscroll-indicator{
background-color: #f5498a !important;
}
滤色
.getGray{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
字体描边
//CSS伪元素用于向某些选择器设置特殊效果。
<div class="success_text" data-text="描边字体">描边字体</div>
.success_text{
font-size: 29px;
color: #ffffff;
position: relative;
}
.success_text::before {
content: attr(data-text);
position: absolute;
-webkit-text-stroke:4px#00a33e;
z-index: -1;
left: 0;
top: 0;
}
倒三角形图标
//使用伪元素实现倒三角形图标
<div class="box"></div>
.box{
width: 185px;
height: 80px;
background-color: #ffffff;
position: relative;
color: #333333;
}
.box::after{
position: absolute;
right: 10px;
bottom:25px;
content: '';
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 26px solid#00a33e;
}
css禁止用户选择
禁止用户选择页面中的文字或者图片
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
去除小程序按钮默认样式
button::after {
border: none;
}
button {
background-color: transparent;
padding: 0;
margin: 0;
border: 0;
padding-left: 0;
padding-right: 0;
border-radius: 0;
font-size: 0rpx;
color: transparent;
display: block;
}
button[disabled]{
background-color: transparent !important;
}
禁止长按保存图片
img {
pointer-event:none;
}
自定义select 三角样式
/* select标签 */
.select_div{
border: 0;
/* 清除默认的箭头样式 */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* 右侧添加小箭头的背景图 */
background: url('../images/arrow.png') 320px center no-repeat;
background-size: 12px;
}
iScroll自定义滚动条样式
css:
.myScrollbarV{
position: absolute;
z-index: 100;
bottom: -40px;
top: 50px;
right: 5px;
width: 0.15rem;
height: 8rem;
background-color: rgb(255, 255, 255);
border-radius: 0.06rem;
pointer-events: none;
}
.myScrollbarV > div {
position: absolute;
z-index: 100;
background: -webkit-gradient(linear, -135% 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)) padding-box padding-box rgb(251, 76, 75);
box-sizing: border-box;
margin-left: -40%;
width: 0.28rem;
height: 230px;
box-shadow: rgba(23, 0, 77, 0.55) 0rem 0.02rem 0.09rem 0.01rem;
border-radius: 0.17rem;
opacity: 0.9;
pointer-events: none;
transition-property: transform;
transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
transform: translate(0px, 0px) translateZ(0px);
}
js:
function loaded(id) {
var myScroll = new iScroll(id, {
scrollbarClass: 'myScrollbar',
scrollbars: true,
hScroll: false, //是否显示水平滚动条
mouseWheel: true,
interactiveScrollbars: true,//用户是否可以拖动滚动条
shrinkScrollbars: false,
//滚动条超出边缘您是否收缩,clip’：裁剪超出的滚动条‘scale’:按比例的收缩滚动条（占用CPU资源）
fadeScrollbars: false//是否渐隐滚动条，关掉可以加速
});
}
ios上按钮disabled时样式问题。
opacity: 1;
input标签输入模式
//小数字输入键盘：(包含数字0-9，点号（“.”）和删除（“x”）键)
<input type="text" inputmode="decimal">
//数字输入键盘：(包含数字0-9，删除（“x”）键)
<input type="text" inputmode="numeric">
//电话键盘输入：包括数字0到9，星号（“*”）和磅（“＃”）键。
<input type="text" inputmode="tel">
在指定位置进行分页的分页行为
<div style="page-break-before: always"></div>
js:
var myScroll = new iScroll(id, {
scrollbarClass: 'myScrollbar',
scrollbars: true,
hScroll: false, //是否显示水平滚动条
mouseWheel: true,
interactiveScrollbars: true,//用户是否可以拖动滚动条
shrinkScrollbars: false,
//滚动条超出边缘您是否收缩,clip’：裁剪超出的滚动条‘scale’:按比例的收缩滚动条（占用CPU资源）
fadeScrollbars: false//是否渐隐滚动条，关掉可以加速
});
Javascript
通过参数名获取路径中的某个参数值
function getParamsBydecodeURI(name) {
const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
const decodeQuery = decodeURIComponent(window.location.search);
let r = decodeQuery.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
获取url中search参数，返回参数列表对象
function syncParam(){
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
}
}
return theRequest;
}
获取url参数-URLSearchParams 方法
// 创建一个URLSearchParams实例
const urlSearchParams = new URLSearchParams(window.location.search);
// 把键值对列表转换为一个对象
const params = Object.fromEntries(urlSearchParams.entries());
ios 中input失焦页面下不来问题
function changeBlur() {
let u = navigator.userAgent, app = navigator.appVersion;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
let timer = setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
clearTimeout(timer)
}, 200)
}
}
<input type="tel" class="phone_input" v-model="userPhone" maxlength="11" @blur.prevent="changeBlur()">
ios中日期转换NAN的问题
将日期字符串的格式符号'-'替换成'/'
'yyyy-mm-dd'.replace(/-/g, '/')
vconsole调试工具
<script src='//cdn.bootcss.com/eruda/1.5.2/eruda.min.js'></script>
<script>eruda.init();</script>
页面禁止滑动
function touchForbid(domId) {
var doms = document.getElementById(domId);
doms.addEventListener(
"touchmove",
function (e) {
e.preventDefault();
},
false
);
document.addEventListener(
"touchmove",
function (e) {
e.preventDefault();
},
false
);
},
touchForbid("app")//调用
正则表达式
1、正整数、正浮点数,保留两位小数：^(([1-9]\d*)(.\d{1,2})?)
2、正整数、正浮点数,保留多位小数：^(([1-9]\d*)(.\d*)?)
3、正则替换
* "hhhh\\nhhhhhhhh\\n".replace(/\\n/g,'<br>') 等同于
"hhhh\\nhhhhhhhh\\n".replaceAll('\\n','<br>') //replaceAll chrome 85版本以上
//'hhhh<br>hhhhhhhh<br>'
打印
//js 打印
window.print();
//css 打印时隐藏某些内容
@media print {
.delImgHandle {
display: none;
}
}
//打印背景色设置，若不生效，颜色添加！important属性
@media print {
.investigation-report-content {
-webkit-print-color-adjust: exact;
}
}
.title{
background: #f5f5f5 !important;
}
微信小程序
bindtap触发事件延迟
//微信小程序中连续点击按钮触发多次接口请求，有时通过定义变量控制不了，可通过以下方法解决：
接口请求前加loading，避免连续点击按钮多次触发接口请求；
wx.showToast({
title: '',
icon: 'loading',
duration: 1000,
mask:true
})
多次触发点击获取手机号
//小程序获取用户手机号按钮，添加防抖进行优化
<button class="btn_getMob" open-type="getPhoneNumber" bindgetphonenumber="debounceSubmit">获取用户手机号</button>
wx.canvasToTempFilePath图片生成失败
调用wx.canvasToTempFilePath将画布生成图片时失败，提示create bitmap failed，生成时加延时解决。
setTimeout(()=>{
wx.canvasToTempFilePath({
canvasId: id,
success(response) {
},
fail(e) {
console.log(e);
}
}
}, this)
},200)
小程序中使用async/await方法
微信小程序中使用async/await方法，提示regeneratorRuntime is not defined的解决方案：
小程序构建npm过程：
1.进入小程序根目录,打开cmd，输入：npm init,生成package.json文件（一路回车就好）
2.输入命令：npm install regenerator-runtime --production
执行命令完之后，然后再去微信开发者中,点击工具-构建npm，然后就成功了；
3、页面引入：import regeneratorRuntime from 'regenerator-runtime';
vue
vue刷新当前页面方法
1、App.vue页面
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive&&isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: "App",
components: {},
provide () {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive:true
};
},
created() {
},
methods: {
//页面刷新方法
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
},
},
};
</script>
2、在需要刷新的页面上注入这个函数然后调用就可
<script>
export default {
name: "childPage",
components: {},
inject: ['reload'],
data() {
return {
title:'需要使用刷新当前页的页面'
};
},
created() {
},
methods: {
//调用刷新方法
refresh(){
this.reload()
}
},
};
</script>
vue刷新当前页面: www.cnblogs.com/aurora-ql/p…
组件传值
1、父子组件传值（props/$emit）
2、获取父子组件的值/方法（ref）
父组件获取子组件：
<childerComponent ref="childerComponentRef"></childerComponent>
this.$refs.childerComponentRef.val //子组件data的数据或方法名
子组件获取父组件:
this.$parent.parentVal
3、非父子组件之间传值(eventBus)
1、main.js全局注册
Vue.prototype.bus = new Vue();
2、发送消息的页面
this.bus.$emit('事件名','传值')
3、接收消息的页面
this.bus.$on('事件名',(e)=>{
console.log("接收到的值",e)
})
//只能在created或者mounted中接收
4、vuex状态管理
