Home >Web Front-end >uni-app >Design and development practice of UniApp to realize page layout and style optimization
UniApp is a cross-platform development framework based on Vue.js, which can quickly compile code into various application forms such as WeChat applets, Apps, and H5. In the development process of UniApp, page layout and style tuning are very important. This article will introduce how to design and develop the page layout and style optimization of UniApp, and practice it through code examples.
1. Page layout design and development
<template> <view class="container"> <view class="item"></view> <view class="item"></view> <view class="item"></view> </view> </template> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width: 30%; height: 100px; background-color: #f0f0f0; } </style>
In the above code, .container
is set to Flex layout, and flex-wrap
is set to ##. #wrap and
justify-content are
space-between, which can realize adaptive layout of elements in the container. By setting the width of
.item to
30%, you can display three elements per line.
component, a grid-like page layout can be achieved. The following is a simple code example:
<template> <view> <uni-grid :columns="3"> <uni-grid-item> <view class="item"></view> </uni-grid-item> <uni-grid-item> <view class="item"></view> </uni-grid-item> <uni-grid-item> <view class="item"></view> </uni-grid-item> </uni-grid> </view> </template> <style> .item { width: 100%; height: 100px; background-color: #f0f0f0; } </style>
columns attribute of
uni-grid to
3 , which can display three elements per row. By setting the width of
.item to
100%, adaptive layout of elements can be achieved.
instead of
margin-left: auto; margin-right: auto;, and
padding: 10px instead of
padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; , etc. By rationally using style abbreviations, you can reduce the amount of code and improve operating efficiency.
flag.
!important will overwrite other styles, causing the weight of the style to be too high, which may affect the display effect of other styles. You can avoid using the
!important flag by properly setting the hierarchical relationship of styles.
The above is the detailed content of Design and development practice of UniApp to realize page layout and style optimization. For more information, please follow other related articles on the PHP Chinese website!