UniApp implementation techniques for page layout and responsive design

UniApp Implementation Techniques for Page Layout and Responsive Design

Introduction:
UniApp is a cross-platform development tool based on the Vue.js framework, which can simultaneously develop iOS, Android, H5, etc. Platform applications. This article will introduce how to use UniApp to implement page layout and responsive design, and provide some practical code examples.

1. Page layout

1. Flex layout
   Flex layout is a commonly used method in page layout, which can automatically adapt to different screen sizes and devices. In UniApp, you can quickly implement adaptive layout of the page through flex layout.

Sample code:

<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>

2. Grid layout
   Grid layout is a two-dimensional grid layout that can divide the page into multiple rows and columns. It is suitable for for complex page layouts. In UniApp, the column layout of the page can be achieved through grid layout.

Sample code:

<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. Responsive design

1. Media query
   Media query is a commonly used technology in responsive design , which can adjust the layout and style of the page according to the screen size of different devices. In UniApp, media queries can be used to adapt the page to different devices.

Sample code:

<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>

2. Dynamic style
   In UniApp, elements can be adapted to different devices by dynamically binding styles. Through the calculated properties and conditional rendering of Vue.js, the style of elements can be dynamically changed according to the screen size of different devices.

Sample code:

<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>

Summary:
Through the methods introduced above, we can implement page layout and responsive design in UniApp. Flex layout and Grid layout can quickly implement adaptive layout of the page, while media queries and dynamic styles can adjust the style and layout of the page according to the screen sizes of different devices. By applying these techniques flexibly, we can develop applications that work across different platforms and devices.

The above is the detailed content of UniApp implementation techniques for page layout and responsive design. For more information, please follow other related articles on the PHP Chinese website!