Leret ke kiri pada uniapp dan butang padam muncul

Dengan populariti telefon pintar dan perkembangan Internet mudah alih, semakin ramai orang mula menggunakan telefon bimbit untuk pelbagai operasi, termasuk menggunakan pelbagai aplikasi. Dalam aplikasi, kami biasanya menemui beberapa data senarai, seperti buku alamat, senarai mesej, senarai pesanan, dsb. Senarai ini selalunya memerlukan operasi pada data, seperti melihat butiran, menandakan sebagai dibaca, memadam, dsb. Antaranya, operasi padam adalah operasi yang agak biasa Artikel ini akan memberi tumpuan kepada cara mencapai kesan leret ke kiri untuk muncul butang padam dalam UniApp.

UniApp ialah rangka kerja pembangunan merentas platform yang boleh menjana aplikasi secara serentak untuk berbilang platform berjalan (termasuk iOS, Android, H5, program mini, apl pantas, dll.) berdasarkan kod yang sama. Ini menghapuskan keperluan untuk pembangun menulis kod berasingan untuk setiap platform, meningkatkan kecekapan pembangunan dan mengurangkan kos pembangunan. Kod sampel dalam artikel ini akan menggunakan bahagian Vue.js daripada rangka kerja pembangunan UniApp sebagai asas.

1. Idea pelaksanaan

Untuk mencapai kesan gelongsor ke kiri untuk memaparkan butang padam, pendekatan umum ialah menambah kawasan gelongsor pada item senarai sebelah kiri, ia dipaparkan butang Padam. Untuk memastikan sokongan untuk berbilang platform pada masa yang sama, kami perlu mempertimbangkan operasi sentuh pada peranti mudah alih dan operasi tetikus pada PC. Berdasarkan ini, kita perlu melaksanakan logik berikut:

1. Operasi gelongsor: pantau operasi pengguna dan tentukan sama ada pengguna telah melakukan operasi gelongsor dalam kawasan sasaran.
2. Kawasan operasi: Kawasan gelongsor perlu ditambahkan pada item senarai.
3. Tunjukkan butang padam: Apabila pengguna meleret ke kiri dalam kawasan sasaran, butang padam dipaparkan.
4. Sembunyikan butang padam: Sembunyikan butang padam apabila pengguna meleret terus dalam kawasan sasaran.
5. Klik butang padam: Apabila pengguna mengklik butang padam, operasi padam dicetuskan.

2. Proses pelaksanaan

1. Membuat halaman senarai dan komponen item senarai

Mula-mula kita perlu membuat halaman senarai dan list item component , di sini kita menggunakan komponen senarai dan komponen senarai item dalam rangka kerja uni-ui sebagai asas untuk melaksanakan beberapa gaya dan susun atur asas. Kod khusus adalah seperti berikut:

<!-- list.vue -->
<template>
  <view>
    <list>
      <list-item
        v-for="(item, index) in list"
        :key="index"
        :data-index="index"
        :class="item.active ? 'item-active' : ''"
      >
        <view
          class="item-content"
          @touchstart="onTouchStart(index, $event)"
          @touchmove="onTouchMove(index, $event)"
          @touchend="onTouchEnd(index, $event)"
          @mousedown="onMouseDown(index, $event)"
          @mousemove="onMouseMove(index, $event)"
          @mouseup="onMouseUp(index, $event)"
        >
          <view class="item-title">{{item.title}}</view>
          <view class="item-delete" v-show="item.active" @click="onDeleteItem(index)">删除</view>
        </view>
      </list-item>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '列表项1', active: false },
        { title: '列表项2', active: false },
        { title: '列表项3', active: false },
        { title: '列表项4', active: false },
        { title: '列表项5', active: false },
      ],
      // 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息
      currentIndex: -1,
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
    };
  },
  methods: {
    onTouchStart(index, event) {
      this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onTouchMove(index, event) {
      this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onTouchEnd(index, event) {
      this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onMouseDown(index, event) {
      this.handleTouchStart(index, event.pageX, event.pageY);
    },
    onMouseMove(index, event) {
      this.handleTouchMove(index, event.pageX, event.pageY);
    },
    onMouseUp(index, event) {
      this.handleTouchEnd(index, event.pageX, event.pageY);
    },
    handleTouchStart(index, x, y) {
      if (this.currentIndex !== -1) {
        return;
      }
      this.currentIndex = index;
      this.startX = x;
      this.startY = y;
    },
    handleTouchMove(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },
    handleTouchEnd(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }
      this.currentIndex = -1;
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },
    onDeleteItem(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style lang="scss">
.item-active .item-content {
  transform: translateX(-60px);
}

.item-content {
  position: relative;
  height: 60px;
  padding: 0 20px;
  line-height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  overflow: hidden;

  .item-delete {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 20px;
    line-height: 60px;
    background-color: #f00;
    color: #fff;
    font-size: 18px;
  }
}
</style>

Di sini kami menambah pendengar acara gelongsor dan butang padam pada kandungan item komponen item senarai, dan mengawal paparan dan menyembunyikan butang padam dengan menambah aktif medan dalam data. Dalam gaya, kami menggunakan atribut transform untuk mencapai kesan gelongsor kiri dan menggunakan atribut limpahan:tersembunyi untuk menyembunyikan butang padam.

2. Dengar untuk acara gelongsor

Kita perlu mendengar peristiwa sentuh untuk melaksanakan operasi gelongsor Kod menggunakan satu sentuhan (peristiwa sentuh) dan peristiwa tetikus (turun tetikus, gerakan tetikus , acara mouseup) untuk memantau operasi gelongsor pengguna. Untuk butiran pelaksanaan khusus, sila rujuk kod di atas.

3. Kawal paparan dan penyembunyian butang padam

Apabila pengguna meluncur ke kiri dalam kawasan sasaran, kita perlu memaparkan butang padam apabila pengguna meluncur ke kanan dalam kawasan sasaran, kita perlu menyembunyikan butang padam. Di sini kami melaksanakan kawalan butang padam dengan menambah medan aktif. Apabila pengguna meleret ke kiri, kami menetapkan medan aktif kepada benar, jika tidak ia menetapkannya kepada palsu.

4. Klik butang padam untuk mencetuskan operasi padam

Apabila pengguna mengklik butang padam, kita perlu mencetuskan operasi padam. Di sini kami memadamkan item semasa daripada data melalui kaedah splice bagi contoh komponen Vue.js Untuk pelaksanaan khusus, sila rujuk kaedah onDeleteItem dalam kod sampel.

3. Ringkasan

Setakat ini, kami telah menyelesaikan kesan leretan kiri untuk muncul butang padam dalam UniApp. Dengan melaksanakan acara gelongsor, mengawal paparan dan menyembunyikan butang padam, dan mengklik butang padam untuk mencetuskan operasi pemadaman, kami boleh menambahkan operasi pemadaman pada data senarai dengan mudah.

Perlu diperhatikan bahawa dalam pembangunan sebenar, kita mungkin perlu memenuhi lebih banyak keperluan, seperti bertanya sebelum pemadaman, menyokong pemadaman berbilang pilihan, dsb. Atas dasar ini, kami boleh membuat lebih banyak pengembangan dan pengoptimuman berdasarkan keperluan sebenar untuk meningkatkan pengalaman pengguna aplikasi.

Atas ialah kandungan terperinci Leret ke kiri pada uniapp dan butang padam muncul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!