跨平台应用开发进阶(五) ：uni-app 实现列表项左划操作_uniapp列表左滑

最后

四轮技术面+一轮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)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。