Bagaimana untuk melaksanakan penatalan halaman ke kiri dan kanan dalam uniapp

Dengan pembangunan berterusan teknologi Internet mudah alih, teknologi bahagian hadapan moden telah menjadi semakin berwarna-warni, dan pereka UI/UX juga telah mula mengemukakan keperluan yang lebih tinggi untuk pembentangan kesan halaman. Antaranya, kesan tatal kiri dan kanan digunakan secara meluas dalam pelbagai senario. Artikel ini akan memperkenalkan cara menggunakan uniapp untuk mencapai kesan tatal kiri dan kanan halaman.

1. Gambaran keseluruhan uniapp

Uniapp merangkum rangka kerja vue.js ke dalam pusat pembangunan, yang boleh menjadi sangat mudah untuk pembangunan berbilang platform, termasuk tetapi tidak terhad kepada applet WeChat, Apl, H5, dsb. Berbanding dengan rangka kerja berbilang platform lain, uniapp adalah ringan, mudah digunakan dan menyokong pemalam.

2. Idea pelaksanaan

Cara biasa untuk mencapai kesan tatal kiri dan kanan halaman dalam uniapp ialah dengan memperkenalkan pemalam tatal yang lebih baik. better-scroll ialah komponen iscroll yang berkuasa dan fleksibel yang boleh membantu pembangun mencapai pelbagai kesan penatalan pada peranti mudah alih. Di sini kami menggunakan pemalam tatal yang lebih baik untuk mencapai kesan tatal kiri dan kanan uniapp, yang dibahagikan kepada langkah berikut:

1. Muat turun pemalam tatal yang lebih baik dan masukkannya ke dalam projek uniapp

Pasang pemalam tatal yang lebih baik dalam direktori akar projek:

npm install better-scroll --save

Perkenalkan dan nyatakannya dalam halaman yang anda perlu gunakan:

import BScroll from 'better-scroll'

export default {
  data() {
    return {
      scroll: null
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}

di mana ini.$refs.wrapper ialah kawasan skrol ialah elemen DOM.

2. Laksanakan kawasan tatal kiri dan kanan

Laksanakan struktur HTML kawasan tatal kiri dan kanan dalam halaman, contohnya:

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </div>
</template>

di mana pembalut adalah pemalam tatal yang lebih baik Bekas kawasan tatal yang diperlukan, kandungan ialah kandungan dalam kawasan tatal. item ialah setiap item kanak-kanak yang boleh ditatal.

3. Mencapai kesan tatal kiri dan kanan

Mencapai kesan tatal kiri dan kanan dalam gaya, contohnya:

<style>
  .wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .content {
    width: 100%;
    height: 200px;
    display: flex;
  }

  .item {
    flex: 0 0 120px;
    height: 200px;
    margin-right: 10px;
    background-color: #eee;
  }
</style>

Antaranya, pembungkus harus menetapkan lebar dan tinggi, dan Tetapkan limpahan kepada tersembunyi untuk menyembunyikan kandungan di luar kawasan. Kandungan perlu menetapkan lebar dan tinggi, dan item kanak-kanak mesti mempunyai lebar dan ketinggian tertentu. Item tersebut ialah setiap sub-item boleh tatal, dan anda perlu menetapkan atribut flex untuk mencapai jarak yang sama dan lebar yang sama.

4. Tambahkan pendengar acara menatal

Tambahkan pendengar acara menatal dalam fungsi mount():

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper)

  this.scroll.on('scroll', (pos) => {
    console.log(pos.x, pos.y)
  })
}

di mana pos.x dan pos.y Ia berada mengimbangi kawasan skrol Pelbagai kesan dinamik boleh dicapai dengan memantau kedua-dua nilai ini.

3. Ringkasan

Melalui empat langkah di atas, kita boleh mencapai kesan tatal kiri dan kanan halaman dalam uniapp, yang boleh digunakan pada pelbagai senario, seperti paparan produk , pameran gambar, susun atur kad, dsb. Walau bagaimanapun, anda harus memberi perhatian kepada penyesuaian saiz kawasan tatal dan sub-item, serta tetapan parameter pemalam tatal yang lebih baik, untuk mencapai kesan terbaik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penatalan halaman ke kiri dan kanan dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!