最后
四轮技术面+一轮hr面结束,学习到了不少,面试也是一个学习检测自己的过程,面试前大概复习了 一周的时间,把以前的代码看了一下,字节跳动比较注重算法,面试前刷了下leetcode和剑指offer, 也刷了些在牛客网上的面经。大概就说这些了,写代码去了~
祝大家都能收获大厂offer~
篇幅有限,仅展示部分内容
应用Uni-app
开发跨平台移动端App项目时,遇到列表项左划操作需求。经过研读Uni-app门户,发现uni-swipe-action组件可以实现列表项左划操作功能。基础效果如下:
应用该组件能够满足基本的列表项目左划操作功能。完整示例demo请移步《uni-swipe-action组件实现列表项左划操作》下载。
二、优化
在组件封装层面,发觉uni-swipe-action
组件并不能很好的满足开发需求,故考虑应用其他解决方案。
视图渲染部分
组件视图渲染层主要渲染列表项左划后的操作栏位,包含自定义图标及操作文字。其中,还涉及vue插槽
应用,对于Vue插槽
不了解的同学可以参考博文《Vue进阶(幺贰捌):Vue插槽:slot、slot-scope与指令v-slot应用讲解》、《Vue进阶(幺贰柒):插槽详解》。
<template>
<view>
<view class="box-slideLeft" scroll-x="true">
<view class="touch-item touch-slideLeft " @touchstart="touchS" @touchmove="touchM" @touchend="touchE"
:style="item\_show.txtStyle">
<slot />
</view>
<view class="touch-item del-box-touch-slideLeft cf-shuCenter" @click="delItem(item\_show)">
<image :src="imgSrc" style="width: 48rpx;height: 48rpx;"></image>
<text class="removeTxt">{{oprTxt}}</text>
</view>
</view>
</view>
</template>
⚠️注意:遇到uni-app
中image src
动态引用图片不生效问题时,注意去掉src
前面的…/@
等符号,要从/static
开始写图片路径。
<image :src="pngimg" mode="aspectFit"></image>
this.pngimg='/static/img/bigVisbilityyellow.png'
JS业务逻辑层面
JS业务逻辑层主要涉及View
的Touch
事件@touchstart、@touchmove、@touchend
,通过监听手势划动触发相应事件。
<script>
export default {
created: function() {
//专门处理检查对象中,某字段是否存在的,如果存在返回 true 不存在返回 false
let that = this;
let item = that.item;
if (!item.hasOwnProperty("txtStyle")) {
this.$set(this.item, 'txtStyle', ''); //不需要初始化了
}
this.item_show = this.item;
},
watch: {
item(e) {
this.item_show = e;
},
},
methods: {
//点击删除按钮事件
delItem: function(e) {
let that = this;
let data = {
item: e,
data: that.data_transit,
};
this.$emit('delItem', data);
},
touchS: function(e) {
let that = this;
if (e.touches.length == 1) {
//设置触摸起始点水平方向位置
this.startX = e.touches[0].clientX
}
this.$forceUpdate();
},
touchM: function(e) {
let that = this;
if (e.touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.startX - moveX;
var delBtnWidth = this.delBtnWidth;
var txtStyle = "";
if (disX == 0 || disX < 0) { //如果移动距离小于等于0,说明向右滑动,文本层位置不变
txtStyle = "left:0px";
} else if (disX > 0) { //移动距离大于0,文本层left值等于手指移动距离
txtStyle = "left:-" + disX + "rpx";
if (disX >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "left:-" + delBtnWidth + "rpx";
}
}
//获取手指触摸的是哪一项
that.item_show.txtStyle = txtStyle;
}
this.$forceUpdate();
},
touchE: function(e) {
let that = this;
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束,手指移动的距离
var disX = this.startX - endX;
var delBtnWidth = this.delBtnWidth;
//如果距离小于删除按钮的1/2,不显示删除按钮
var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0px";
//获取手指触摸的是哪一项
### 刷面试题
刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
* **前端字节跳动真题解析**
![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)
* **【269页】前端大厂面试题宝典**
![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)
最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。