uniapp menggunakan paparan web tanpa menggunakan skrin penuh

Dalam beberapa tahun kebelakangan ini, dengan populariti Internet mudah alih, semakin banyak perusahaan dan pembangun telah mula menumpukan pada pembangunan aplikasi mudah alih. Dalam pembangunan merentas platform, Uni-app telah menarik banyak perhatian sebagai penyelesaian yang sangat baik. Dalam pembangunan sebenar, sesetengah pembangun menghadapi masalah paparan skrin penuh paparan web dalam aplikasi Uni, mengakibatkan antara muka yang tidak sedap dipandang. Artikel ini akan memperkenalkan cara menggunakan paparan web dalam Uni-app untuk menghalang aplikasi daripada menggunakan keseluruhan skrin.

1. Analisis Masalah

Apabila menggunakan paparan web untuk bersarang halaman dalam Uni-app, ramai pembangun biasanya berfikir untuk menulis secara langsung ketinggian paparan web sebagai 100%. Walau bagaimanapun, ini pasti akan membawa kepada halaman yang menggunakan keseluruhan skrin dan kurang cantik. Untuk menyelesaikan masalah ini, kami boleh menyarangkan bekas dalam halaman dan menambah paparan web dalam bekas.

2. Pelaksanaan kod

1. Tambahkan bekas pada halaman

<view class="container">
  <web-view :src="url"></web-view>
</view>

2. Tentukan gaya bekas

Dengan menetapkan gaya bekas, paparan web boleh menduduki saiz yang diperlukan dalam bekas ini.

.container {
  height : 600rpx;  // 自定义高度
  width : 100%;
  margin-top : 50rpx;
} 

3. Tentukan gaya paparan web

Kita perlu menetapkan ketinggian paparan web kepada 100%. Pada masa ini, paparan web akan menduduki seluruh ruang bekas. Tetapi kita tidak memerlukan ini. Untuk memusatkan paparan web dalam bekas, kita boleh menggunakan reka letak fleksibel dan menentukan kedua-dua mendatar dan menegak.

web-view {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

Melalui kod di atas, kami boleh menggunakan paparan web dalam Uni-app untuk mencapai kesan tidak menduduki skrin penuh.

3. Nota

1. Selagi bekas menentukan ketinggian, ketinggian paparan web ialah 100%
2. Jika anda ingin menetapkan lebar paparan web, anda hanya boleh menggunakan reka letak flex Atau tentukan lebar tertentu; aplikasi, webview adalah Salah satu komponen yang sangat penting. Bagaimana untuk menghalang paparan web daripada menduduki skrin penuh dalam aplikasi? Artikel ini memperkenalkan pelaksanaan mudah: mengawal saiz paparan web dengan menetapkan gaya bekas. Saya percaya bahawa pembaca boleh berjaya mencapai kesan ini dalam projek Uni-app mereka sendiri melalui pengenalan artikel ini.

Atas ialah kandungan terperinci uniapp menggunakan paparan web tanpa menggunakan skrin penuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!