uniapp menetapkan ketinggian tatal

Uniapp ialah alat pembangunan aplikasi merentas platform berdasarkan rangka kerja Vue.js, yang boleh membina aplikasi dengan cepat untuk berbilang platform (iOS, Android, H5). Apabila membangun dengan Uniapp, anda sering menghadapi keperluan untuk menetapkan ketinggian skrol. Oleh itu, artikel ini akan memperkenalkan cara menetapkan ketinggian skrol dalam Uniapp.

1. Tetapkan ketinggian tatal halaman

1. Tambah teg paparan tatal dalam templat

Apabila menulis halaman, kami boleh menambahnya templat Teg paparan tatal untuk melaksanakan tatal halaman. Pada masa yang sama, kita juga perlu menetapkan ketinggian paparan tatal supaya halaman boleh ditatal.

Sebagai contoh, tambahkan kod berikut pada templat:

<template>
  <scroll-view style="height: 1000rpx;">
    <!-- 页面内容 -->
  </scroll-view>
</template>

Dalam contoh ini, kami menetapkan ketinggian paparan tatal kepada 1000rpx.

2. Kira ketinggian skrol dalam fungsi cangkuk kitaran hayat halaman

Selain menetapkan ketinggian paparan skrol dalam templat, kami juga boleh menetapkan ketinggian skrol dalam cangkuk kitaran hayat halaman Ketinggian tatal dikira dalam fungsi.

Sebagai contoh, dalam fungsi cangkuk onLoad halaman, kita boleh mengira ketinggian skrol seperti berikut:

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 页面内容 -->
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        scrollHeight: 0
      };
    },
    onLoad() {
      // 获取屏幕高度
      const screenHeight = uni.getSystemInfoSync().screenHeight;
      // 计算scroll-view的高度
      const scrollHeight = screenHeight - 100;  // 100为非内容区高度
      // 更新scroll-view的高度
      this.scrollHeight = scrollHeight;
    }
  }
</script>

Dalam contoh ini, kita menggunakan skrolHeight berubah untuk mewakili ketinggian skrol- view , nilai awalnya ialah 0. Dalam fungsi cangkuk onLoad pada halaman, kami memperoleh ketinggian skrin melalui API uni.getSystemInfoSync() dan mengira ketinggian paparan tatal berdasarkan ketinggian skrin. Akhir sekali, kami menetapkan ketinggian paparan tatal yang dikira kepada pembolehubah scrollHeight, dengan itu mengemas kini ketinggian tatal halaman.

2. Tetapkan ketinggian tatal komponen

Selain ketinggian tatal halaman, kadangkala kita perlu menetapkan ketinggian tatal untuk komponen. Uniapp menyediakan mod campuran untuk berkongsi kod antara berbilang komponen. Kita boleh menggunakan corak mixin untuk menetapkan ketinggian tatal komponen.

1. Buat mixin

Pertama, kita perlu mencipta mixin dalam projek Uniapp. Buat fail "scrollHeightMixin.js" baharu dalam folder "/common/mixins/" dalam direktori akar projek untuk menyimpan kod mixin kami.

export default {
  data() {
    return {
      scrollHeight: 0
    };
  },
  mounted() {
    // 获取屏幕高度
    const screenHeight = uni.getSystemInfoSync().screenHeight;
    // 计算scroll-view的高度
    const scrollHeight = screenHeight - 100;   // 100为非内容区高度
    // 更新scroll-view的高度
    this.scrollHeight = scrollHeight;
  }
};

Dalam contoh ini, kami mentakrifkan campuran bernama scrollHeightMixin, yang mengandungi pembolehubah bernama scrollHeight. Dalam fungsi cangkuk yang dipasang pada mixin, kami menggunakan API uni.getSystemInfoSync() untuk mendapatkan ketinggian skrin dan mengira ketinggian paparan tatal berdasarkan ketinggian skrin. Akhir sekali, kami menetapkan ketinggian paparan tatal yang dikira kepada pembolehubah scrollHeight untuk mencapai ketinggian tatal komponen.

2. Menggunakan mixin dalam komponen

Seterusnya, kita perlu memperkenalkan mixin yang ditakrifkan sebelum ini ke dalam komponen. Tambahkan kod berikut dalam teg skrip komponen:

<script>
  import ScrollHeightMixin from "@/common/mixins/scrollHeightMixin.js";
  export default {
    mixins: [ScrollHeightMixin],
    // 组件其他内容
  };
</script>

Dalam contoh ini, kami menggunakan pernyataan import untuk memperkenalkan campuran yang ditakrifkan sebelum ini ke dalam komponen. Kemudian, kami menambah mixin pada sifat mixins supaya komponen boleh menggunakan pembolehubah scrollHeight yang ditakrifkan dalam mixin.

Akhir sekali, kita boleh menggunakan teg paparan tatal dalam teg templat komponen dan menetapkan ketinggian paparan tatal kepada nilai pembolehubah scrollHeight yang ditakrifkan dalam campuran.

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 组件内容 -->
  </scroll-view>
</template>

Dalam contoh ini, kami menetapkan ketinggian paparan tatal kepada nilai pembolehubah scrollHeight yang ditakrifkan dalam mixin.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan Uniapp untuk menetapkan ketinggian tatal halaman dan ketinggian tatal komponen. Untuk ketinggian tatal halaman, kita boleh menetapkan ketinggian paparan tatal dalam templat, atau mengira ketinggian tatal dalam fungsi cangkuk kitaran hayat halaman. Untuk ketinggian skrol komponen, kita boleh menggunakan mod mixin untuk mencapainya. Semoga artikel ini membantu anda dalam menetapkan ketinggian skrol dalam pembangunan Uniapp.

Atas ialah kandungan terperinci uniapp menetapkan ketinggian tatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!