Rumah >hujung hadapan web >uni-app >Teknik pelaksanaan UniApp untuk susun atur halaman dan reka bentuk responsif
Kemahiran pelaksanaan UniApp untuk reka bentuk halaman dan reka bentuk responsif
Pengenalan:
UniApp ialah alat pembangunan merentas platform berdasarkan rangka kerja Vue.js, yang boleh membangunkan aplikasi untuk iOS, Android, H5 dan platform lain secara serentak. Artikel ini akan memperkenalkan cara menggunakan UniApp untuk melaksanakan reka letak halaman dan reka bentuk responsif, dan menyediakan beberapa contoh kod praktikal.
1. Susun atur halaman
Contoh kod:
<template> <view class="container"> <view class="item">Item 1</view> <view class="item">Item 2</view> <view class="item">Item 3</view> </view> </template> <style> .container{ display: flex; flex-wrap: wrap; } .item{ flex: 1 0 100px; margin: 10px; background-color: #f0f0f0; } </style>
Contoh kod:
<template> <view class="container"> <view class="row"> <view class="col">Column 1</view> <view class="col">Column 2</view> </view> <view class="row"> <view class="col">Column 3</view> <view class="col">Column 4</view> </view> </view> </template> <style> .container{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } .row{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } .col{ background-color: #f0f0f0; padding: 10px; } </style>
2. Reka bentuk responsif
Contoh kod:
<template> <view class="container"> <view class="item">Item 1</view> <view class="item">Item 2</view> <view class="item">Item 3</view> </view> </template> <style> .container{ display: flex; flex-wrap: wrap; } .item{ flex: 1 0 100px; margin: 10px; background-color: #f0f0f0; } @media screen and (min-width: 768px){ .container{ flex-wrap: nowrap; } .item{ flex: 0 0 calc(33.333333% - 20px); } } </style>
Contoh kod:
<template> <view class="container"> <view class="item" :style="itemStyle">Item 1</view> <view class="item">Item 2</view> <view class="item">Item 3</view> </view> </template> <script> export default { computed: { itemStyle() { if (uni.getSystemInfoSync().screenWidth > 768) { return { flex: '0 0 calc(33.333333% - 20px)' } } else { return { flex: '1 0 100px' } } } } } </script> <style> .container{ display: flex; flex-wrap: wrap; } .item{ margin: 10px; background-color: #f0f0f0; } </style>
Ringkasan:
Melalui kaedah yang diperkenalkan di atas, kami boleh melaksanakan reka bentuk halaman dan reka bentuk responsif dalam UniApp. Reka letak fleksibel dan susun atur Grid boleh dengan cepat melaksanakan reka letak penyesuaian halaman, manakala pertanyaan media dan gaya dinamik boleh melaraskan gaya dan reka letak halaman mengikut saiz skrin peranti yang berbeza. Dengan menggunakan teknik ini secara fleksibel, kami boleh membangunkan aplikasi yang berfungsi merentas platform dan peranti yang berbeza.
Atas ialah kandungan terperinci Teknik pelaksanaan UniApp untuk susun atur halaman dan reka bentuk responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!