Detailed tutorial of view component of uni-app development component

View is one of the most basic components in UniApp, used to create containers to contain other components or elements. It is similar to the div element in HTML, providing layout and style control functions. This tutorial will introduce how to use the View component and provide some sample code to help you understand it better.

Use the View component

To use the View component, you need to add tags to the page's template and write other components or elements in it. Here is an example of a basic View component structure:

<template>
  <view>
    <!-- 在这里添加其他组件或元素 -->
  </view>
</template>

common attributes

class and style

The View component supports the use of class and style attributes to control styles. class can accept a string or an array, which is used to specify the class name of the component; style accepts a string, which is used to specify the inline style of the component. The sample code is as follows:

<template>
  <view class="container" style="background-color: #f0f0f0;">
    <text>这是一个 View 组件示例</text>
  </view>
</template>

id

The id attribute is used to specify a unique identifier for the View component, which is convenient for subsequent DOM operations or style control. The sample code is as follows:

<template>
  <view id="my-view">
    <text>这是一个带有 id 的 View 组件示例</text>
  </view>
</template>

onTap and catchTap

The onTap and catchTap attributes are used to bind the handler of the click event. onTap is a bubbling event, catchTap is a non-bubbling event. The sample code is as follows:

<template>
  <view onTap="handleTap">
    <text>点击我触发事件</text>
  </view>
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleTap() {
      
      
      console.log('View 被点击了');
    }
  }
}
</script>

layout example

The View component can be used to implement various layouts, the following are a few common layout examples.

vertical center layout

<template>
  <view class="container">
    <view class="centered">
      <text>垂直居中</text>
    </view>
  </view>
</template>

<style>
.container {
      
      
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  background-color: #f0f0f0;
}

.centered {
      
      
  background-color: #ffffff;
  padding: 20rpx;
}
</style>

horizontal layout

<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:```css
  flex-direction: row;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 20rpx;
}

.item {
      
      
  background-color: #ffffff;
  padding: 10rpx;
}
</style>

grid layout

<template>
  <view class="grid-container">
    <view class="grid-item">Item 1</view>
    <view class="grid-item">Item 2</view>
    <view class="grid-item">Item 3</view>
    <view class="grid-item">Item 4</view>
  </view>
</template>

<style>
.grid-container {
      
      
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20rpx;
  background-color: #f0f0f0;
  padding: 20rpx;
}

.grid-item {
      
      
  background-color: #ffffff;
  padding: 10rpx;
}
</style>

These examples just show some basic usage and common layouts of the View component, and you can design more complex layouts according to your needs.