## 第一次写文档 这是我第一次写有关技术文档，其实我也不知道写啥说白了就是为了（奖励矿石 10000），终极目标是为了换杯子、半袖、帽子。 其实所有要做的事情都有自己的明确目标和方向，就比如现在的你阅读我这篇文章，你的目的可能是为了获取我积累总结的经验，又或者我就是想摸个鱼顺便看看大家都在干嘛？？？
现在我来分享或者说下最近积累的东西，希望对你有所帮助，jym请赐教。
废话不多说现在开始直接撸：
最近解决bug 总结了几个情况 来自vue-h5
L：喂那个谁？你这边英语没有左对齐，英语单词怎么换行显示了，这一段大文章怎么首行缩了这么多？
W: 哦~~~
.word{ word-break:keep-all; text-align:left; white-space:pre-wrap; }
L：喂！！！？兄台 友友！！ 这个名字过长可以处理下吗？就是前面放个头像 后面跟上名字 过长。。。
W: 收到 安排吧！
.word{ max-width:80px; height:16px; line-height:16px; text-align:center; overflow:hidden; color:#ffffff; text-overflow:ellipsis }
L：那个谁来着？！！！这边的动画为啥只有一边有了 另一边不显示额，浏览器之前还测试过呢！！？真机为啥这样了？？？希望它左右对称然后### 贝塞尔曲线显示 流动
W: 额~~ 看了真机 我去！还真是这样！！别慌别慌
.pic{ background:url("~@/assets/...) no-repeat; background-size: 100% 100%; animation: active 2s infinite; animation-timing-function: cubic-bezier(0,0.3,0.6,1,2); }
@keyframes active { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 0; } }
聪明的我另一边只要把图片反转过来就完美啦！！！啊哈哈哈哈 transform: rotateY(180deg); /* 水平镜像翻转 */ 然后就会发现，真机的时候另一边没有了 浏览器可以。。。最终解决方案找UI切图另一半的方向图片就好用了
L：给你提个bug,快看看！！！！你这个下拉刷新有bug
W: 好嘞~~~~ e 菜鸡的我花了两天时间轻松解决代码如下 ：
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text=""
@load="onLoads"
:offset="50"
>
<div
class="lists"
v-for="(item, index) in lists"
:key="`list${index}`"
></div>
</va-list>
默认//loading: false,
//finished: false,
onLoads () {
this.loading = true;
this.page++;
setTimeout(() => {
this.GetList();
请求成功后
this.loading = false;
this.finished = true;
}, 200);
},
//css
外层{
overflow:hidden;
min-height: 300px;
}
nice !!!! 实测好用就是这么简单~~~
L：我想在全局的头像上加个阴影
W: 别问我 问我就是我的错 改！
.img{
filter: brightness(0.5);
}
L：我想在整个首页上面加个阴影
W: 内心歪歪 So Easy 写个盒子 权重最大 固定定位
.box{ position: fixed; background: #000000; opacity: 0.5; z-index: 9999; top: 0px; left: 0px; right: 0px; bottom: 0px; color: #000000; }
遮罩层的下面页面
咦~~~~下面的页面竟然能滑动
在包一层
@touchmove.prevent.stop @mousewheel.prevent
nice!!!
L：数组列表里加个点击提示点其它地方弹窗消失 懂？
W: 哦~~~ 冒泡！！！ 组件或者自己写 还好vue 现成的
v-on:click.stop="enter" 外部再加个点击 取消 懂？！！
L：点击返回顶部 ？？？
W: 信手拈来 锚点？？？ nonono
let dom = document.getElementsByClassName("container"); dom[0].scrollTop = 0;
顺便提一嘴首页布局：
.container{height: 100vh;
background-color: #000000;
overflow: auto;}
L：过滤时间东三区
W: 收到！脑子一想这还不简单 moment 信手拈来
//这只是正常情况下
import moment from 'moment'
Vue.filter("filterTime", function (timestamp) {
if (timestamp && timestamp !== "") {
let dateStr = moment(timestamp).format("DD/MM/yyyy hh:mm");
return dateStr;
}
return "-";
});
//要的是东三区
Vue.filter('TIMEfilter', function (time) {
const d = new Date();
const localOffset = d.getTimezoneOffset() * 60000;
time = time + localOffset;
const offset = 3; // 东3区
const GMT_3 = (3600000 * offset);
time = time + GMT_3;
var datet = new Date(parseInt(time) * 1)
let Y = datet.getFullYear()
let M = '/' + (datet.getMonth() + 1 < 10 ? '0' + (datet.getMonth() + 1) : datet.getMonth() + 1) + '/'
let getMinutes = datet.getMinutes() < 10 ? '0' + datet.getMinutes() : datet.getMinutes()
let getHours = datet.getHours() < 10 ? '0' + datet.getHours() : datet.getHours()
let getSeconds = datet.getSeconds() < 10 ? '0' + datet.getSeconds() : datet.getSeconds()
let getgetDates = datet.getDate() < 10 ? '0' + datet.getDate() : datet.getDate()
let D = ' ' + getHours + ':' + getMinutes + ':' + getSeconds
return getgetDates + M + Y + D + ' (GMT+3)'
})
