Gunakan uniapp untuk melaksanakan fungsi padam gelongsor

Gunakan uniapp untuk melaksanakan fungsi padam gelongsor

Fungsi padam gelongsor ialah salah satu kaedah interaksi biasa dalam aplikasi mudah alih moden Ia membolehkan pengguna memadamkan kandungan yang tidak diingini dengan cepat dalam senarai atau halaman melalui gerak isyarat gelongsor. Dalam rangka kerja uniapp, melaksanakan fungsi padam gelongsor adalah sangat mudah dan boleh digunakan pada berbilang platform.

Pertama, kita perlu mencipta projek uniapp dan memaparkan item senarai yang perlu dipadamkan pada halaman. Dalam item senarai, kita boleh menambah kawasan yang mencetuskan pemadaman gelongsor dan melaksanakan acara yang sepadan.

Contoh kod HTML:

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="item" @touchstart="touchStart(index)" @touchmove="touchMove(index)" @touchend="touchEnd(index)">
      <view class="content">{{ item }}</view>
      <view class="delete" @click="deleteItem(index)">删除</view>
    </view>
  </view>
</template>

Dalam kod di atas, kami menggunakan arahan v-for untuk beralih melalui item senarai dan menambah kawasan yang mencetuskan pemadaman gelongsor untuk setiap item senarai. Di sebelah kanan kawasan padam gelongsor, kami telah menambah butang "Padam".

Seterusnya, kita perlu melaksanakan logik pemadaman gelongsor dalam contoh vue yang sepadan.

Contoh kod JavaScript:

<script>
export default {
  data() {
    return {
      list: ['列表项1', '列表项2', '列表项3', '列表项4', '列表项5'],
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      deleteWidth: 100,
      deletingIndex: -1
    }
  },
  methods: {
    touchStart(index) {
      this.deletingIndex = -1;
      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    touchMove(index) {
      this.endX = event.changedTouches[0].pageX;
      this.endY = event.changedTouches[0].pageY;
      let moveX = this.endX - this.startX;
      let moveY = this.endY - this.startY;
      if (Math.abs(moveX) > Math.abs(moveY) && moveX < 0 && Math.abs(moveX) >= this.deleteWidth) {
        this.deletingIndex = index;
      } else if (this.deletingIndex === index && Math.abs(moveX) < Math.abs(moveY)) {
        this.deletingIndex = -1;
      }
    },
    touchEnd(index) {
      if (this.deletingIndex === index) {
        this.deleteItem(index);
      }
      this.deletingIndex = -1;
      this.startX = 0;
      this.startY = 0;
      this.endX = 0;
      this.endY = 0;
    },
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

Dalam kod di atas, kami mengikat tiga fungsi acara sentuhan touchStart, touchMove dan touchEnd. Dalam acara touchStart, kami merekodkan maklumat koordinat apabila gelongsor bermula. Dalam acara touchMove, kami mengira jarak gelongsor dan menentukan sama ada fungsi padam gelongsor diaktifkan pada masa ini berdasarkan syarat tertentu. Dalam acara touchEnd, laksanakan operasi pemadaman atau batalkan pemadaman berdasarkan hasil gelongsor.

Akhir sekali, kita perlu menambah gaya yang sepadan pada halaman.

Contoh kod CSS:

<style>
.item {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  padding-left: 20px;
  font-size: 28px;
}

.delete {
  width: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  font-size: 28px;
}
</style>

Melalui kod di atas, kami melaksanakan fungsi pemadaman gelongsor asas dan menunjukkan contoh pemadaman item senarai dalam projek uniapp. Dalam projek sebenar, kami boleh menyesuaikan lagi gaya dan kesan interaksi mengikut keperluan untuk menjadikan fungsi padam gelongsor lebih selaras dengan jangkaan pengguna.

Ringkasan:
Dalam rangka kerja uniapp, sangat mudah untuk melaksanakan fungsi padam gelongsor Anda hanya perlu menambahkan acara dan gaya yang sepadan pada halaman. Melalui fungsi acara sentuh seperti touchStart, touchMove dan touchEnd, kami boleh dengan mudah menyedari kesan interaktif pemadaman gelongsor dan melaksanakan operasi pemadaman dalam kaedah yang sepadan. Pada masa yang sama, melalui penyesuaian gaya CSS, kami boleh menjadikan fungsi padam gelongsor lebih cantik dan praktikal.

Atas ialah kandungan terperinci Gunakan uniapp untuk melaksanakan fungsi padam gelongsor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!