Bagaimana untuk melaksanakan fungsi menatal klik kiri dan kanan dalam Uniapp

uniapp ialah rangka kerja aplikasi merentas platform berdasarkan Vue.js, yang boleh membangunkan aplikasi untuk berbilang platform secara serentak seperti iOS, Android, H5 dan program mini. Antaranya, operasi menatal adalah operasi yang sangat biasa di Uniapp Hari ini kita akan membincangkan cara melaksanakan penatalan klik kiri dan kanan dalam Uniapp.

1. Pengenalan latar belakang

Dalam aplikasi sebenar Uniapp, kami sering menghadapi keperluan untuk melaksanakan operasi tatal kiri dan kanan pada halaman. Contohnya, menu navigasi mudah alih atau menatal imej mendatar memerlukan klik kiri dan kanan untuk menatal. Jadi, bagaimana untuk mencapai kesan tatal klik kiri dan kanan ini dalam Uniapp? Seterusnya kami akan menggunakan langkah terperinci untuk menjawab soalan ini.

2. Langkah pelaksanaan

1 Cipta projek uniapp dalam HBuilderX, buka halaman/index/index.vue dan tambah kod berikut:

<template>
  <view>
    <view>
      <view>1</view>
      <view>2</view>
      <view>3</view>
      <view>4</view>
      <view>5</view>
      6</view>
    </view>
  
</template>

<style>
.container{
  height:300px;
  overflow:hidden;
}
.scroll-view{
  display:flex;
  width:max-content;
  height:100%;
  transition:transform 0.5s ease;
}
.scroll-item{
  width:100px;
  height:300px;
  background-color:#eee;
  margin-right:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:30px;
}
</style>

2. . Dalam gaya, kami menggunakan reka letak fleksibel dan menetapkan lebar kepada kandungan maksimum, supaya lebar kandungan boleh disesuaikan. Pada masa yang sama, kami menggunakan limpahan:tersembunyi dalam gaya bekas, dengan itu mengehadkan ketinggian bekas dan menyembunyikan kandungan di luar bekas.

3 Untuk mencapai kesan tatal kiri dan kanan, kita perlu menggunakan atribut peralihan dan menukar nilai atribut transformasi untuk mencapai kesan tatal. Di sini, kami menukar nilai transformasi paparan tatal dengan mengklik butang untuk mencapai kesan mengklik kiri dan kanan untuk menatal.

4 Untuk mencapai kesan mengklik butang, kita perlu mentakrifkan nilai semasa dalam data untuk mewakili kedudukan semasa, dan kemudian menukar nilai transformasi paparan tatal secara dinamik dengan menukar nilai bagi kedudukan semasa dalam kaedah.

<script>
export default {
  data(){
    return{
      current:0
    }
  },
  methods:{
    slideLeft(){
      if(this.current > 0){
        this.current = this.current - 1;
      }
    },
    slideRight(){
      if(this.current < 5){
        this.current = this.current + 1;
      }
    }
  },
  watch:{
    current:function(){
      this.$nextTick(()=>{
        this.$refs.scrollView.style.transform = "translateX(" + (-110 * this.current) + "px)";
      });
    }
  }
}
</script>

Di sini, kami menggunakan atribut jam tangan untuk memantau perubahan semasa, dan kemudian menggunakan kaedah $nextTick untuk memastikan elemen DOM telah diberikan sebelum melaksanakan operasi tertentu. Dalam kaedah tersebut, kami mentakrifkan dua kaedah, slideLeft dan slideRight, untuk mencapai kesan gelongsor ke kiri dan kanan. Apabila melaksanakan kesan gelongsor, kami menggunakan translateX untuk mengawal kedudukan paparan tatal.

5 Akhir sekali, kita perlu menambah butang gelongsor kiri dan kanan pada halaman supaya pengguna boleh mengklik untuk mencapai kesan gelongsor. Kami menambah kod berikut pada halaman:

<view>
  <button>left</button>
  <button>right</button>
</view>

Di sini, kami menggunakan @click untuk mengikat acara klik butang, dan memanggil kaedah slideLeft dan slideRight dalam kaedah untuk mencapai kesan kiri dan klik kanan dan slaid.

3. Ringkasan

Melalui langkah di atas, kita boleh mencapai kesan klik kiri dan kanan serta slaid dalam Uniapp. Dalam aplikasi praktikal, kami juga boleh mengoptimumkan dan mengembangkan kesan gelongsor mengikut keperluan khusus. Berikut adalah contoh mudah, saya harap ia akan membantu untuk pemula.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi menatal klik kiri dan kanan dalam Uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!