Berbagi teknologi

Terminal seluler uniapp menerapkan pengumpulan produk drag-and-drop, dan fungsi menggeser ke kiri untuk menghapus beberapa produk berturut-turut!

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Saya sudah lama tidak bertemu dengannya. Saya baru saja bertemu dengan sebuah produk. Ini adalah pertama kalinya dia membuat suatu produk. Selalu ada beberapa desain anti-manusia. Itu benar, itu adalah koleksi drag-and-drop pada judul, dan geser ke kiri untuk menghapus produk. Melihat semua aplikasi utama, saya tidak dapat menemukannya dengan fungsi seperti ini. Dia terus mengatakan bahwa dia akan menunjukkannya kepada saya setelah menggunakannya. Saya menunggu lama, mungkin dia sudah melupakannya.

Ketika menghadapi permintaan seperti ini, saya juga mencoba berkomunikasi dengannya, seperti menggunakan keranjang belanja untuk menghapus produk, dll., dan mengubah beberapa logika yang dapat diterima semua orang, tetapi dia punya idenya sendiri, dan saya harus memilih untuk hormati itu.

1. Fungsi pengumpulan seret dan lepas

Setelah lama mencari fungsi koleksi drag-and-drop, saya menggunakan plug-in drag-and-drop yang ditulis oleh seorang master, dan menyesuaikannya karena kebutuhan saya tidak memerlukan menampilkan koleksi, dan halaman melompat saat mengumpulkan, jadi Akan ada beberapa modifikasi yang digunakan, tetapi secara umum serupa. Berikut situs resmi plugin yang dapat Anda rujuk:

dokumentasi bahasa Mandarin vue.draggable - itxst.com

Catatan: Selama pengembangan, saat memantau peristiwa awal dan akhir drag, kesalahan akan dilaporkan. Jika demikian, disarankan agar Anda menyelesaikannya sendiri atau menggunakan metode yang sama seperti saya untuk memantau proses drag, dll. Ini bervariasi tergantung pada kebutuhan. Lampirkan kode di akhir:

  1. <template>
  2. 	<div id="app">
  3. 		<h1>商品列表</h1>
  4. 		<div class="container">
  5. 			<div class="row">
  6. 				<!-- @change="onDragEnd"  @start="start" @end="onEnd" :move="onMove" delay="1000" -->
  7. 				<div class="col-md-6">
  8. 					<draggable v-model="leftItems" :group="group" delay="1000"
  9. 						@change="onDragEnd" :move="onMove"
  10. 						animation="300"  dragClass="dragClass" ghostClass="ghostClass">
  11. <!-- 						<u-swipe-action :show="item.show" :index="index" 
  12. 							v-for="(item, index) in leftItems" :key="item.id" 
  13. 							@click="click" @open="open"
  14. 							:options="options"
  15. 						> -->
  16. 							<div class="item" v-for="(item, index) in leftItems" :key="item.id" >{{ item.name }}</div>
  17. 						<!-- </u-swipe-action> -->
  18. 					</draggable>
  19. 				</div>
  20.  
  21. 				<div class="col-md-6">
  22. 					<draggable v-model="rightItems" :group="group"
  23. 						@change="onDragEnd" :move="onMove">
  24. 						<div v-for="(item, index) in rightItems" :key="index" @longpress="aaa(index)" :class="['item',item.status==true?'shake':'']">{{ item.name }}</div>
  25. 					</draggable>
  26. 				</div>
  27. 			</div>
  28. 		</div>
  29. 	</div>
  30. </template>
  31. <script>
  32. 	import draggable from 'vuedraggable';
  33.  
  34. 	export default {
  35. 		components: {
  36. 			draggable
  37. 		},
  38. 		data() {
  39. 			return {
  40. 				disabled: false,
  41. 				btnWidth: 180,
  42. 				show: false,
  43. 				options: [
  44. 					{
  45. 						text: '删除',
  46. 						style: {
  47. 							backgroundColor: '#dd524d'
  48. 						}
  49. 					}
  50. 				],
  51. 				timerId: null,//计时器id
  52. 				group: {
  53. 					name: "itxst",
  54. 					pull: true, //可以拖出
  55. 					put: true, //可以拖入
  56. 				},
  57. 				leftItems: [{
  58. 						id: 1,
  59. 						show: false,
  60. 						status: false,
  61. 						name: '商品1'
  62. 					},
  63. 					{
  64. 						id: 2,
  65. 						show: false,
  66. 						status: false,
  67. 						name: '商品2'
  68. 					},
  69. 					{
  70. 						id: 3,
  71. 						show: false,
  72. 						status: false,
  73. 						name: '商品3'
  74. 					},
  75. 					{
  76. 						id: 4,
  77. 						show: false,
  78. 						status: false,
  79. 						name: '商品4'
  80. 					},
  81. 					{
  82. 						id: 5,
  83. 						show: false,
  84. 						status: false,
  85. 						name: '商品5'
  86. 					},
  87. 					{
  88. 						id: 6,
  89. 						show: false,
  90. 						status: false,
  91. 						name: '商品6'
  92. 					},
  93. 				],
  94. 				rightItems: [{
  95. 						id: 1,
  96. 						show: false,
  97. 						status: false,
  98. 						name: '商品1'
  99. 					},
  100. 					{
  101. 						id: 2,
  102. 						show: false,
  103. 						status: false,
  104. 						name: '商品2'
  105. 					},
  106. 					{
  107. 						id: 3,
  108. 						show: false,
  109. 						status: false,
  110. 						name: '商品3'
  111. 					},
  112. 					{
  113. 						id: 4,
  114. 						show: false,
  115. 						status: false,
  116. 						name: '商品4'
  117. 					},
  118. 					{
  119. 						id: 5,
  120. 						show: false,
  121. 						status: false,
  122. 						name: '商品5'
  123. 					},
  124. 					{
  125. 						id: 6,
  126. 						show: false,
  127. 						status: false,
  128. 						name: '商品6'
  129. 					},
  130. 				]
  131. 			};
  132. 		},
  133. 		onLoad() {
  134.  
  135. 		},
  136. 		methods: {
  137. 			click(index) {
  138. 				this.leftItems.splice(index, 1);
  139. 				this.$u.toast(`删除了第${index}个cell`);
  140. 			},
  141. 			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
  142. 			open(index) {
  143. 				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
  144. 				// 原本为false，再次设置为false会无效
  145. 				this.leftItems[index].show = true;
  146. 				this.leftItems.map((val, idx) => {
  147. 					if(index != idx) this.leftItems[idx].show = false;
  148. 				})
  149. 			},
  150.  
  151. 			start(e) {
  152. 				console.log(e, 'kasihi ');
  153. 			},
  154. 			onEnd() {
  155. 				console.log(e, '结束了 ');
  156. 			},
  157. 			onMove(e) { // keyi huanyuan
  158. 				clearTimeout(this.timerId)
  159. 				console.log('如果能监听到要在这里清楚计时器');
  160. 				return this.canFormSet()
  161. 			},
  162. 			aaa(index) {
  163. 				this.rightItems[index].status = true
  164. 				this.timerId = setTimeout(() => {
  165. 					this.rightItems[index].status = false
  166. 					clearTimeout(this.timerId)
  167. 				}, 500)
  168. 			},
  169. 			onDragEnd(event) {
  170. 				console.log(event);
  171. 				// if (event.newIndex !== event.oldIndex) {
  172. 				// const movedItem = this.leftItems[event.oldIndex];
  173. 				// this.leftItems.splice(event.oldIndex, 1);
  174. 				// this.rightItems.push(movedItem);
  175. 				// 判断是否可以形成集合跳转页面
  176. 				if (this.canFormSet()) {
  177. 					// 跳转到另一个页面的逻辑
  178. 					console.log('路由去往新的页面');
  179. 					// this.$router.push('/another-page');
  180. 				} else {
  181. 					// 如果不能形成集合，则复原
  182. 					console.log('复原');
  183.  
  184. 					// this.rightItems.pop();
  185. 					// this.leftItems.splice(event.newIndex, 0, movedItem);
  186. 				}
  187. 				console.log('6666');
  188. 				clearTimeout(this.timerId)
  189. 				//   } else {
  190. 				// console.log('else');
  191. 				//     // Revert the move if it's not a valid combination
  192. 				//     const movedItem = this.rightItems.pop();
  193. 				//     this.leftItems.splice(event.newIndex, 0, movedItem);
  194. 				//   }
  195. 			},
  196.  
  197. 			canFormSet() {
  198. 				// 如果可以形成集合，返回 true；否则返回 false
  199. 				return false; // 示例中默认返回 true
  200. 			}
  201. 		}
  202. 	};
  203. </script>
  204.  
  205. <style scoped lang="scss">
  206. 	.shake {
  207. 		width: 100px;
  208. 		height: 100px;
  209. 		background-color: red;
  210. 		transform-origin: center;
  211. 		animation: shake .5s infinite ease-in-out;
  212. 	}
  213.  
  214. 	@keyframes shake {
  215.  
  216. 		0%,
  217. 		100% {
  218. 			transform: rotate(-5deg);
  219. 			/* transform: translate(-50%, -50%) rotate(-5deg); */
  220. 		}
  221.  
  222. 		50% {
  223. 			transform: rotate(5deg);
  224. 		}
  225. 	}
  226.  
  227. 	.ghostClass {
  228. 		background-color: blue !important;
  229. 	}
  230.  
  231. 	.chosenClass {
  232. 		background-color: red !important;
  233. 		opacity: 1 !important;
  234. 	}
  235.  
  236. 	.dragClass {
  237. 		background-color: blueviolet !important;
  238. 		opacity: 1 !important;
  239. 		box-shadow: none !important;
  240. 		outline: none !important;
  241. 		background-image: none !important;
  242. 	}
  243.  
  244. 	.container {
  245. 		width: 100%;
  246. 		margin-top: 20px;
  247. 	}
  248. 	.row {
  249. 		width: 100%;
  250. 		display: flex;
  251. 	}
  252. 	.col-md-6 {
  253. 		width: 100%;
  254. 		// display: flex;
  255. 		// flex-wrap: wrap;
  256. 	}
  257.  
  258. 	.item {
  259. 		width: 100px;
  260. 		height: 100px;
  261. 		margin-left: 20px;
  262. 		border: 1px solid #ccc;
  263. 		padding: 10px;
  264. 		margin-bottom: 10px;
  265. 		background-color: #f9f9f9;
  266. 	}
  267. </style>

2. Fungsi penghapusan geser untuk beberapa produk dalam satu baris

Semua orang telah melihat kode di atas dan saya berencana untuk menggunakannya u-geser-tindakan untuk mengimplementasikan fungsi hapus geser, tetapi hanya dapat menggeser dan menghapus satu baris. Jadi saya melihat kode sumbernya, dan kemudian saya mendapat pencerahan. Saya membuat kode tangan kode efek penghapusan dengan beberapa baris. Saya juga akan melakukan beberapa optimasi di masa depan referensi Anda. Saya harap ini dapat membantu Anda:

  1. <template>
  2.   <view class="container">
  3.     <movable-area class="box-info" 
  4. 		v-for="(item, index) in items"
  5.         :key="index">
  6.       <movable-view
  7.         style="width: 140px; height: 100px; background-color: #aa55ff;"
  8. 		:style="{widh}"
  9.         :x="index * 10"
  10.         :direction="'horizontal'"
  11.         :out-of-bounds="false"
  12.       >
  13.         <view class="product">
  14. 			<view style="width: 100px;">{{item}}</view>
  15. 			<view class="move" @click="removeShop">删除</view>
  16. 		</view>
  17.       </movable-view>
  18.     </movable-area>
  19.   </view>
  20. </template>
  21.  
  22. <script>
  23. export default {
  24.   data() {
  25.     return {
  26.       items: ['商品1', '商品2']
  27.     };
  28.   },
  29.   methods: {
  30.     removeShop(index) {
  31. 		alert('删除商品操作')
  32. 	}
  33.   }
  34. };
  35. </script>
  36.  
  37. <style scoped lang="scss">
  38. .container {
  39.   display: flex;
  40.   justify-content: center;
  41.   align-items: center;
  42.   height: 100%;
  43.   .box-info {
  44. 	display: flex;
  45. 	flex-wrap: wrap;
  46.   	height: 100px; 
  47.   	width: 100px; 
  48.   	background-color: #55ff7f;
  49.   	overflow: hidden;
  50.   	margin: 20px;
  51. 	.product {
  52. 	  display: flex;
  53. 	  justify-content: center;
  54. 	  align-items: center;
  55. 	  font-size: 14px;
  56. 	  color: #333;
  57. 	  .move{
  58. 	  	  background-color: #55aa00;
  59. 	  	  width: 40px;
  60. 	  	  height: 100px;
  61. 	  	  writing-mode: vertical-rl; 
  62. 	  	  display: flex;
  63. 	  	  justify-content: center;
  64. 	  	  align-items: center;
  65. 	  }
  66. 	}
  67.   }
  68. }
  69. </style>

Profil pribadi

Ia telah mengabdikan dirinya untuk meneliti teknologi selama lebih dari 30 tahun, dan mahir dalam berbagai bahasa seperti java, linux, javascript, php, css, dll. "Saya telah memberikan banyak kontribusi di bidang dokumentasi pengembang stasiun sumber terbuka untuk berbagi beberapa masalah dalam pengembangan teknologi untuk referensi di masa mendatang. Semua orang memeriksanya

informasi kontak saya

Surat