Обмен технологиями

В мобильном терминале uniapp реализован сбор товаров методом перетаскивания, а также функция смахивания влево для удаления нескольких товаров подряд!

2024-07-12

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

Я давно его не видел. Недавно познакомился с продуктом. Это был его первый раз, когда он делал продукт. Всегда есть какие-то античеловеческие замыслы. Правильно, это коллекция перетаскивания по заголовку и смахивание левой кнопкой мыши для удаления продукта. Просматривая все основные приложения, я не нашел ни одного с такой функцией. Он все время говорил, что покажет мне его после использования, я долго ждал, может он забыл.

Столкнувшись с такого рода спросом, я также попытался связаться с ним, например, использовать корзину для удаления продуктов и т. д., а также изменить некоторую логику, которую каждый может принять, но у него были свои идеи, и мне пришлось выбрать уважайте это.

1. Функция сбора перетаскиванием

После долгих поисков функции перетаскивания коллекции я использовал плагин перетаскивания, написанный мастером, и адаптировал его соответствующим образом, поскольку мое требование требует отображения не коллекции, а страницы. подпрыгивает при сборе, поэтому будут некоторые модификации, но в целом они похожи. Вот официальный сайт плагина.

vue.draggable документация на китайском языке — itxst.com

Примечание. Во время разработки при отслеживании событий начала и окончания перетаскивания будет сообщаться об ошибке. Если это так, рекомендуется решить ее самостоятельно или использовать тот же метод, что и я, для мониторинга процесса перетаскивания и т. д. Это зависит от того. на потребностях. Прикрепите код в конце:

  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. Функция скользящего удаления нескольких товаров в одной строке.

Все видели приведенный выше код, и я планирую его использовать. u-swipe-действие для реализации функции скользящего удаления, но она может перемещать и удалять только одну строку. Итак, я взглянул на исходный код, а затем меня осенило: я вручную закодировал код эффекта удаления из нескольких строк. В будущем я также проведу некоторую оптимизацию. ваша ссылка, надеюсь, она вам поможет:

  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>

Личный профиль

Он посвятил себя исследованию технологий более 30 лет и владеет различными языками, такими как Java, Linux, Javascript, php, css и т. д. Он внес большой вклад в область открытого исходного кода. Станция документации для разработчиков, где можно поделиться некоторыми проблемами в разработке технологий для дальнейшего использования.

моя контактная информация

Почта