Rumah > hujung hadapan web > uni-app > Analisis ringkas tentang cara uniapp membuat tatal paparan

Analisis ringkas tentang cara uniapp membuat tatal paparan

PHPz
Lepaskan: 2023-04-06 14:27:24
asal
2586 orang telah melayarinya

UniApp ialah rangka kerja pembangunan merentas platform yang boleh membangunkan aplikasi mudah alih dengan mudah Komponen paparan tatal boleh merealisasikan penatalan dalam paparan.

1. Lihat dokumentasi

Sebelum menggunakan komponen paparan tatal untuk melaksanakan tatal paparan, kita perlu membaca dengan teliti pengenalan kepada paparan tatal dalam dokumentasi rasmi UniApp. Dalam dokumentasi, kita boleh belajar tentang peranan dan pelaksanaan komponen paparan tatal.

2. Gunakan komponen paparan tatal

  1. Dalam komponen fail tunggal Vue, anda perlu menambah komponen paparan tatal dalam teg atribut:
<template>
  <view>
    <scroll-view id="scrollview">
      <!-- 在此处添加需要滚动的内容 -->
    </scroll-view>
  </view>
</template>
Salin selepas log masuk
  1. Tambahkan kandungan yang perlu ditatal dalam teg
  2. Gunakan kaedah uni.createSelectorQuery().select() dalam teg untuk mendapatkan komponen paparan tatal, dan kemudian gunakan atribut tatal atas untuk menetapkan kedudukan bar tatal untuk mencapai tatal .
export default {
  onReady() {  // 生命周期事件,页面装载完成后执行
    uni.createSelectorQuery().select('#scrollview').fields({
      size: true,
    }, data => {
      const height = data.height; // 获取scroll-view组件高度
      uni.pageScrollTo({  // 设置滚动条位置
        scrollTop: height,
        duration: 300,
      });
    }).exec();
  },
};
Salin selepas log masuk

Kod di atas ialah contoh mudah menatal paparan. Melalui kaedah di atas, kesan tatal paparan boleh dicapai dengan mudah dalam UniApp.

3. Perihalan atribut komponen paparan tatal

  1. skrol-x: Tetapkan tatal mendatar, nilainya benar atau salah.
  2. scroll-y: Tetapkan tatal menegak, nilainya adalah benar atau palsu.
  3. ambang atas: Peristiwa yang dicetuskan atas dicetuskan apabila menatal ke atas Nilai lalai ialah 50 dan unit ialah px.
  4. ambang bawah: Peristiwa yang dicetuskan lebih rendah dicetuskan apabila menatal ke bawah lalai ialah 50 dan unit ialah px.
  5. tatal-dengan-animasi: Sama ada hendak menggunakan tatal animasi, lalainya adalah palsu.
  6. tatal ke kiri: Tetapkan kedudukan bar skrol mendatar.
  7. tatal ke atas: Tetapkan kedudukan bar tatal menegak.

4. Ringkasan

Tidak sukar untuk menggunakan komponen tatal-lihat untuk melaksanakan tatal paparan dalam UniApp. Dengan mempelajari dan menggunakannya, kami boleh menambahkan kesan menatal pada aplikasi kami dengan mudah dan memberikan pengalaman pengguna yang lebih baik. Sudah tentu, semasa penggunaan, pelbagai atribut dan peristiwa perlu digunakan secara fleksibel mengikut situasi sebenar.

Atas ialah kandungan terperinci Analisis ringkas tentang cara uniapp membuat tatal paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan