私の連絡先情報
郵便メール:
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
長い間会っていなかったので、初めて作品を作りました。反人間的なデザインは常に存在します。そうです、タイトルにドラッグ アンド ドロップしてコレクションを選択し、左にスワイプして商品を削除します。主要なアプリを見てもそのような機能はありませんでしたが、忘れてしまったのか、使ったら教えてくれると言われ、ずっと待っていました。
このような要望に遭遇した場合、私もショッピングカートを使って商品を削除したり、誰もが納得できるロジックに変更したりするなど、彼とのコミュニケーションを試みましたが、彼には彼の考えがあり、私は選択せざるを得ませんでした。それを尊重してください。
私の要件ではコレクションとページを表示する必要がないため、ドラッグ アンド ドロップ コレクション機能を長い間探した後、マスターによって作成されたドラッグ アンド ドロップ プラグインを使用して、それに応じて調整しました。収集時にジャンプするため、使用中にいくつかの変更が加えられますが、一般的には、プラグインの公式 Web サイトを参照してください。
vue.draggable 中国語ドキュメント - itxst.com
注: 開発中、ドラッグの開始および終了イベントを監視するとエラーが報告されます。その場合は、自分で解決するか、私と同じ方法でドラッグプロセスを監視することをお勧めします。これは状況によって異なります。ニーズ。最後にコードを添付します。
- <template>
- <div id="app">
- <h1>商品列表</h1>
- <div class="container">
- <div class="row">
- <!-- @change="onDragEnd" @start="start" @end="onEnd" :move="onMove" delay="1000" -->
- <div class="col-md-6">
- <draggable v-model="leftItems" :group="group" delay="1000"
- @change="onDragEnd" :move="onMove"
- animation="300" dragClass="dragClass" ghostClass="ghostClass">
- <!-- <u-swipe-action :show="item.show" :index="index"
- v-for="(item, index) in leftItems" :key="item.id"
- @click="click" @open="open"
- :options="options"
- > -->
- <div class="item" v-for="(item, index) in leftItems" :key="item.id" >{{ item.name }}</div>
- <!-- </u-swipe-action> -->
- </draggable>
- </div>
-
- <div class="col-md-6">
- <draggable v-model="rightItems" :group="group"
- @change="onDragEnd" :move="onMove">
- <div v-for="(item, index) in rightItems" :key="index" @longpress="aaa(index)" :class="['item',item.status==true?'shake':'']">{{ item.name }}</div>
- </draggable>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import draggable from 'vuedraggable';
-
- export default {
- components: {
- draggable
- },
- data() {
- return {
- disabled: false,
- btnWidth: 180,
- show: false,
- options: [
- {
- text: '删除',
- style: {
- backgroundColor: '#dd524d'
- }
- }
- ],
- timerId: null,//计时器id
- group: {
- name: "itxst",
- pull: true, //可以拖出
- put: true, //可以拖入
- },
- leftItems: [{
- id: 1,
- show: false,
- status: false,
- name: '商品1'
- },
- {
- id: 2,
- show: false,
- status: false,
- name: '商品2'
- },
- {
- id: 3,
- show: false,
- status: false,
- name: '商品3'
- },
- {
- id: 4,
- show: false,
- status: false,
- name: '商品4'
- },
- {
- id: 5,
- show: false,
- status: false,
- name: '商品5'
- },
- {
- id: 6,
- show: false,
- status: false,
- name: '商品6'
- },
- ],
- rightItems: [{
- id: 1,
- show: false,
- status: false,
- name: '商品1'
- },
- {
- id: 2,
- show: false,
- status: false,
- name: '商品2'
- },
- {
- id: 3,
- show: false,
- status: false,
- name: '商品3'
- },
- {
- id: 4,
- show: false,
- status: false,
- name: '商品4'
- },
- {
- id: 5,
- show: false,
- status: false,
- name: '商品5'
- },
- {
- id: 6,
- show: false,
- status: false,
- name: '商品6'
- },
- ]
- };
- },
- onLoad() {
-
- },
- methods: {
- click(index) {
- this.leftItems.splice(index, 1);
- this.$u.toast(`删除了第${index}个cell`);
- },
- // 如果打开一个的时候,不需要关闭其他,则无需实现本方法
- open(index) {
- // 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
- // 原本为false,再次设置为false会无效
- this.leftItems[index].show = true;
- this.leftItems.map((val, idx) => {
- if(index != idx) this.leftItems[idx].show = false;
- })
- },
-
- start(e) {
- console.log(e, 'kasihi ');
- },
- onEnd() {
- console.log(e, '结束了 ');
- },
- onMove(e) { // keyi huanyuan
- clearTimeout(this.timerId)
- console.log('如果能监听到要在这里清楚计时器');
- return this.canFormSet()
- },
- aaa(index) {
- this.rightItems[index].status = true
- this.timerId = setTimeout(() => {
- this.rightItems[index].status = false
- clearTimeout(this.timerId)
- }, 500)
- },
- onDragEnd(event) {
- console.log(event);
- // if (event.newIndex !== event.oldIndex) {
- // const movedItem = this.leftItems[event.oldIndex];
- // this.leftItems.splice(event.oldIndex, 1);
- // this.rightItems.push(movedItem);
- // 判断是否可以形成集合跳转页面
- if (this.canFormSet()) {
- // 跳转到另一个页面的逻辑
- console.log('路由去往新的页面');
- // this.$router.push('/another-page');
- } else {
- // 如果不能形成集合,则复原
- console.log('复原');
-
- // this.rightItems.pop();
- // this.leftItems.splice(event.newIndex, 0, movedItem);
- }
- console.log('6666');
- clearTimeout(this.timerId)
- // } else {
- // console.log('else');
- // // Revert the move if it's not a valid combination
- // const movedItem = this.rightItems.pop();
- // this.leftItems.splice(event.newIndex, 0, movedItem);
- // }
- },
-
- canFormSet() {
- // 如果可以形成集合,返回 true;否则返回 false
- return false; // 示例中默认返回 true
- }
- }
- };
- </script>
-
- <style scoped lang="scss">
- .shake {
- width: 100px;
- height: 100px;
- background-color: red;
- transform-origin: center;
- animation: shake .5s infinite ease-in-out;
- }
-
- @keyframes shake {
-
- 0%,
- 100% {
- transform: rotate(-5deg);
- /* transform: translate(-50%, -50%) rotate(-5deg); */
- }
-
- 50% {
- transform: rotate(5deg);
- }
- }
-
- .ghostClass {
- background-color: blue !important;
- }
-
- .chosenClass {
- background-color: red !important;
- opacity: 1 !important;
- }
-
- .dragClass {
- background-color: blueviolet !important;
- opacity: 1 !important;
- box-shadow: none !important;
- outline: none !important;
- background-image: none !important;
- }
-
- .container {
- width: 100%;
- margin-top: 20px;
- }
- .row {
- width: 100%;
- display: flex;
- }
- .col-md-6 {
- width: 100%;
- // display: flex;
- // flex-wrap: wrap;
- }
-
- .item {
- width: 100px;
- height: 100px;
- margin-left: 20px;
- border: 1px solid #ccc;
- padding: 10px;
- margin-bottom: 10px;
- background-color: #f9f9f9;
- }
- </style>
上記のコードは誰もが見たことがあり、私もそれを使用する予定です Uスワイプアクションスライド削除機能を実装しますが、スライドして削除できるのは 1 行だけです。そこで、ソース コードを見て、複数行の削除エフェクト コードを手動でコーディングしました。これ以上苦労せずに、コードを紹介します。あなたの参考になれば幸いです。
- <template>
- <view class="container">
- <movable-area class="box-info"
- v-for="(item, index) in items"
- :key="index">
- <movable-view
- style="width: 140px; height: 100px; background-color: #aa55ff;"
- :style="{widh}"
- :x="index * 10"
- :direction="'horizontal'"
- :out-of-bounds="false"
- >
- <view class="product">
- <view style="width: 100px;">{{item}}</view>
- <view class="move" @click="removeShop">删除</view>
- </view>
- </movable-view>
- </movable-area>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
- items: ['商品1', '商品2']
- };
- },
- methods: {
- removeShop(index) {
- alert('删除商品操作')
- }
- }
- };
- </script>
-
- <style scoped lang="scss">
- .container {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- .box-info {
- display: flex;
- flex-wrap: wrap;
- height: 100px;
- width: 100px;
- background-color: #55ff7f;
- overflow: hidden;
- margin: 20px;
- .product {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 14px;
- color: #333;
- .move{
- background-color: #55aa00;
- width: 40px;
- height: 100px;
- writing-mode: vertical-rl;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- }
- }
- </style>