Partage de technologie

Le terminal mobile uniapp implémente la collecte de produits par glisser-déposer et la fonction de balayage vers la gauche pour supprimer plusieurs produits d'affilée !

2024-07-12

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

Je ne l'ai pas vu depuis longtemps. J'ai récemment rencontré un produit. C'était la première fois qu'il fabriquait un produit. Il y a toujours des conceptions anti-humaines. C'est vrai, c'est le glisser-déposer sur le titre et le balayage vers la gauche pour supprimer le produit. En regardant toutes les principales applications pour cette fonction, je n'en ai trouvé aucune avec ce design. Il n'arrêtait pas de me le montrer après l'avoir utilisé. J'ai attendu longtemps, peut-être qu'il l'avait oublié.

Face à ce genre de demande, j'ai aussi essayé de communiquer avec lui, comme utiliser le panier pour supprimer des produits, etc., et changer une logique que tout le monde peut accepter, mais il avait ses propres idées, et j'ai dû choisir de respecte-le.

1. Fonction de collecte glisser-déposer

Après avoir longuement cherché la fonction de collection glisser-déposer, j'ai utilisé un plug-in glisser-déposer écrit par un maître, et je l'ai adapté en conséquence car mon besoin ne nécessite pas d'afficher la collection, ni la page. sautera lors de la collecte, donc il y aura quelques modifications en cours d'utilisation, mais en général c'est similaire Voici le site officiel du plug-in auquel vous pouvez vous référer :

vue.draggable Documentation chinoise - itxst.com

Remarque : Pendant le développement, lors de la surveillance des événements de début et de fin du glisser, une erreur sera signalée. Si tel est le cas, il est recommandé de la résoudre vous-même ou d'utiliser la même méthode que moi pour surveiller le processus de glisser, etc. Cela varie en fonction. sur les besoins. Joignez le code à la fin :

  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. Fonction de suppression coulissante pour plusieurs produits sur une seule ligne

Tout le monde a vu le code ci-dessus et j'ai l'intention de l'utiliser action de balayage en U pour implémenter la fonction de suppression coulissante, mais il ne peut faire glisser et supprimer qu'une seule ligne. J'ai donc jeté un œil au code source, puis j'ai eu une révélation. J'ai codé à la main un code d'effet de suppression avec plusieurs lignes. Je ferai également quelques optimisations à l'avenir, je vais vous donner le code pour. votre référence. J'espère que cela pourra vous aider:

  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 personnel

Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.

mes coordonnées

Mail