技術共有

uniappモバイルターミナルは、ドラッグアンドドロップによる商品の収集と、左スワイプで複数の商品を連続して削除する機能を実装しています。

2024-07-12

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

長い間会っていなかったので、初めて作品を作りました。反人間的なデザインは常に存在します。そうです、タイトルにドラッグ アンド ドロップしてコレクションを選択し、左にスワイプして商品を削除します。主要なアプリを見てもそのような機能はありませんでしたが、忘れてしまったのか、使ったら教えてくれると言われ、ずっと待っていました。

このような要望に遭遇した場合、私もショッピングカートを使って商品を削除したり、誰もが納得できるロジックに変更したりするなど、彼とのコミュニケーションを試みましたが、彼には彼の考えがあり、私は選択せざるを得ませんでした。それを尊重してください。

1.ドラッグ＆ドロップ収集機能

私の要件ではコレクションとページを表示する必要がないため、ドラッグ アンド ドロップ コレクション機能を長い間探した後、マスターによって作成されたドラッグ アンド ドロップ プラグインを使用して、それに応じて調整しました。収集時にジャンプするため、使用中にいくつかの変更が加えられますが、一般的には、プラグインの公式 Web サイトを参照してください。

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スワイプアクションスライド削除機能を実装しますが、スライドして削除できるのは 1 行だけです。そこで、ソース コードを見て、複数行の削除エフェクト コードを手動でコーディングしました。これ以上苦労せずに、コードを紹介します。あなたの参考になれば幸いです。

  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 などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便