0.dom瓶颈
方案2：长列表 gitcode.net/mirrors/tan…
1.vue 同个页面params变化，无法跳转
<router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>
computed: {
// 配置多个key
key () {
return this.$route.path + Date.now()
},
},
2.ios兼容
if (to.meta && to.meta.scrollToTop) {
console.log("自动滚动顶部触发")
scrollToTop()
window.scrollTo(0, 0)
}
// 防止ios滚动白屏
if (history.scrollRestoration) {
console.log('防止ios滚动白屏')
history.scrollRestoration = 'manual';
}
3.flex布局导致子元素被拉伸
1. align-content: flex-start; //换行多行不拉伸均分 配置
2.给父元素套一层
4.图标和单行文案同时存在
以外行行高为标准 + frow-s-c
5.判断是否为刷新操作
function isReloadPage(){
return window.performance != undefined &&
window.performance.navigation!= undefined &&
window.performance.navigation.type == 1
}
参考链接：
https://blog.csdn.net/lijia_1983370657/article/details/103355854
6.专题参考
1.漫画小说跳转
https://sandboxpages.sfacg.com/h5/act/mvmh20230616/
2.老板专题（日轻推荐-旧折扣、埋点）
https://sandboxpages.sfacg.com/h5/act/rq202307/
3.老板专题（无限使徒pv-视频、小说全订、埋点、转盘）
https://sandboxpages.sfacg.com/h5/act/symwpv202308/
https://sandboxpages.sfacg.com/h5/act/wxstpv202308/
4.重复任务参考
https://sandboxpages.sfacg.com/h5/act/kxj202303/
5.征文：
https://sandboxpages.sfacg.com/h5/act/dyzw20230516/
7.iphone6 深海巨坑
1.最后排查出来是低版本机型 使用vue框架 v-show，事件列车也无法监听，两点导致动画和动效无法出现
8.img消除间隙
1. display: block;
2. font-size: 0;
9.pc轮播事件
Swipe 组件功能太少，无法实现复杂效果？
Vant 中的 Swipe 组件是比较轻量的，因此功能也比较基础。如果需要更复杂的轮播效果，推荐使用社区里一些优质的轮播库，比如 vue-awesome-swiper。
10.移动端适配pc侧边居右
.sidebar-container {
position: fixed;
top: 489px;
// right: 0;
z-index: 10;
left: calc(50% + 315px); //!!!
transform: translateX(-50%);//!!!
}
11.创建base64
/**@url :图片服务器上的url
* @img :图片url对应的图片
* */
const toBase64 = (img)=>{
const canvas = document.createElement('canvas');//创建一个canvas元素
canvas.width = img.width;//把当前url对应的图片的宽度赋予canvas
canvas.height = img.height;//把当前url对应的图片的高度赋予canvas
const ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0,canvas.width,canvas.height);//在画布上一比一的画出img
const base64 = canvas.toDataURL('image/jpeg');//调用canvas的toDataURL获取.jpg的base64数据
return base64;
}
const getImageUrlBase64 = (url)=>{
const img = new Image();
img.crossOrigin = 'anonymous';//处理跨域，后端也要设置跨域处理才行
img.src = url;
img.onload=()=>{
return toBase64(img);
}
}
12.动画库的记录
0. animation
https://animate.style/
class动画(calss支持动画类型、延迟、动画播放速度等)
1.gsap 自定义动画
https://greensock.com/get-started/#soWhatPropertiesCanIAnimate
结合案例：https://medium.com/@dailyfire/vue-js-gsap-animations-26fc6b1c3c5a
2.vue-prlx
https://madewith.cn/721
vue-prlx是一个图片显示视差指令，支持图片变换和背景位置的动画处理。
参考 https://vue-prlx.surge.sh/
13.cookie配置
export function setCookie (cname, cvalue, exdays, domain) {
let d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = 'expires=' + d.toUTCString();
document.cookie = cname + '=' + cvalue + '; ' + expires + ';path=/' + ';domain=' + domain;
}
export function getCookie (cname) {
let name = cname + '=';
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return '';
}
14.含有滚动条的文案，如何使得滚动条控制在外边 (外层盒子只要上下padding, 内层盒子要左右padding+overflowScroll_
.rule {
margin: 308px auto 0;
width: 653px;
height: 229px;
background: url('~@/assets/images/home/card-treasure-chest/tab4/bg-decompose-rule.png') no-repeat center/cover;
font-size: 28px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 15px;
padding: 63px 0 19px 0;
p {
padding: 0 56px 0 41px;
height: 150px;
overflow-y: auto;
font-size: 24px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 38px;
.red {
font-size: 24px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: red;
line-height: 38px;
}
}
}
