Bolehkah uniapp menggunakan pemalam leret?

Dengan populariti peranti mudah alih seperti telefon bimbit, pembangunan APP telah menjadi tumpuan semakin ramai pengaturcara. Pembangunan APP perlu mengambil kira pelbagai faktor prestasi, seperti penggunaan memori, lebar jalur, dsb. Untuk menyelesaikan masalah ini, uniapp wujud, yang juga merupakan alat pembangunan yang sangat berkuasa. Walau bagaimanapun, sebagai seorang pemula, adakah anda tahu sama ada anda boleh menggunakan pemalam leret apabila membangun dengan uniapp? Artikel ini akan meneroka isu ini.

Pertama, kita perlu memahami konsep pemalam uniapp dan swiper. uniapp ialah rangka kerja pembangunan merentas platform berdasarkan rangka kerja Vue.js Ia boleh menerbitkan kod ke pelbagai platform pada masa yang sama (kebanyakan platform APP, platform program mini, H5, aplikasi pantas, dll.), membenarkan pembangun ke Aplikasi untuk. setiap platform dibina berdasarkan kod. Pemalam leret ialah perpustakaan pemalam sentuh dan slaid berasaskan JavaScript untuk peranti mudah alih yang boleh merealisasikan pelbagai kesan sentuhan dan slaid dengan cepat pada desktop dan peranti mudah alih.

Berdasarkan konsep di atas, kita boleh membuat kesimpulan bahawa uniapp boleh menggunakan pemalam leret. Khususnya, menggunakan uniapp untuk pembangunan boleh memasang, merujuk dan menggunakan pemalam swiper dengan mudah, dan juga boleh memenuhi keperluan pembangunan merentas platform aplikasi dengan baik.

Jadi, bagaimanakah cara kita menggunakan pemalam leret melalui uniapp? Berikut ialah langkah khusus:

Langkah 1: Muat turun pemalam leret

Sebelum menggunakan pemalam leret, anda perlu memuat turun pemalam terlebih dahulu. Di laman web GitHub, anda boleh menemui arahan pemasangan rasmi untuk swiper, yang sangat mudah untuk dikendalikan.

Dalam direktori akar folder projek tempatan, buka terminal dan masukkan arahan berikut untuk memuat turun swiper.

npm install swiper --save

Selepas memasukkan arahan di atas, sistem akan memuat turun pakej pemalam swiper secara automatik dan memasangnya ke dalam folder projek anda.

Langkah 2: Perkenalkan pemalam leret

Selepas muat turun selesai, anda perlu memperkenalkan komponen leret yang diperlukan ke halaman yang anda perlukan untuk menggunakan leret. Anda boleh menggunakan kod berikut untuk memperkenalkan swiper dalam komponen halaman anda (fail .vue):

<template>
  <swiper :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide> 
    <swiper-slide>Slide 2</swiper-slide> 
    <swiper-slide>Slide 3</swiper-slide> 
    <swiper-slide>Slide 4</swiper-slide> 
  </swiper>
</template>

<script>
  import Swiper from 'swiper';
 
  export default {
    data() {
      return {
        swiperOption: {
          loop: true,
          autoplay: 3000,
          pagination: '.swiper-pagination',
        }
      }
    },
    mounted(){
      this.swiper = new Swiper('.swiper-container', this.swiperOption);
    }
  }
</script>

<style>
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
 
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>

Dalam kod di atas, kami memperkenalkan komponen swiper melalui pernyataan import dan menggunakannya dalam maya DOM Teg <swiper> mentakrifkan bekas swiper. Objek swiperOption di sini ialah tetapan pilihan komponen swiper, yang perlu diubah mengikut keperluan sebenar.

Fungsi mounted() ialah fungsi panggil balik selepas komponen swiper dipaparkan. Dalam fungsi, kami memulakan komponen swiper melalui pernyataan new Swiper(). Perlu diingat bahawa di sini kita menghantar dua parameter kepada new Swiper():

• .swiper-container: bekas dengan kelas swiper-container; untuk swiperOption.
• Langkah 3: Gunakan pemalam leret

Selepas proses di atas selesai, anda boleh menggunakan pemalam leret dengan lancar. Seterusnya, kami mengulangi data melalui arahan

dan menyarangkan teg

dalam bekas swiper. Pada masa yang sama, kami menyediakan penomboran dan tag v-for dalam swiper (lihat kod untuk butiran). <swiper-slide>navigation

Dalam kod di atas, teg

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(item,index) in list" :key="index">
      {{item.name}}
    </swiper-slide>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </swiper>
</template>

<script>
  import Swiper from 'swiper';
 
  export default {
    data() {
      return {
        list: [
          {name: 'Slide 1'}, {name: 'Slide 2'},
          {name: 'Slide 3'}, {name: 'Slide 4'}
        ],
        swiperOption: {
          loop: true,
          autoplay: 3000,
          pagination: '.swiper-pagination',
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
      };
    },
    mounted(){
      this.swiper = new Swiper('.swiper-container', this.swiperOption);
    }
  };
</script>

<style>
  .swiper-slide{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 18px;
    background: #fff;
  }
</style>

mewakili setiap peluncur dalam bekas leret Data dilalui melalui

untuk merealisasikan paparan dinamik bekas gelongsor leret. Dalam pilihan swiper, kami mentakrifkan beberapa nilai atribut ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​lah​​​ akan terus berubah dengan penggunaan komponen swiper. <swiper-slide>v-forRingkasan

Kini, uniapp ialah rangka kerja pembangunan merentas platform yang semakin popular di kalangan pembangun. Pemalam leret ialah perpustakaan pemalam gelongsor sentuh yang berkuasa untuk peranti mudah alih. Mudah untuk menggunakan pemalam swiper dalam uniapp Anda hanya perlu melengkapkan operasi muat turun, import dan definisi masing-masing, kemudian anda boleh mula menggunakan pemalam tersebut.

Sudah tentu, kami juga perlu ambil perhatian bahawa menggunakan pemalam boleh meningkatkan beban halaman dengan mudah, jadi sila pertimbangkan dengan teliti semasa pembangunan sebenar dan buat pilihan yang munasabah berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Bolehkah uniapp menggunakan pemalam leret?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!