Basic Components

Overview

Basic components are the fundamental building blocks of uni-app applications. These components provide essential UI elements and functionality that work consistently across all supported platforms.

Text Components

text

The text component is used to display text content with various styling options.

<template>
  <view>
    <!-- Basic text -->
    <text>Hello World</text>
    
    <!-- Styled text -->
    <text class="title">Page Title</text>
    
    <!-- Selectable text -->
    <text selectable>This text can be selected</text>
    
    <!-- Text with line breaks -->
    <text decode>&lt;br&gt;Line break&lt;/br&gt;</text>
  </view>
</template>

<style>
.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
</style>

Properties

• selectable: Boolean - Whether text can be selected
• space: String - How to handle spaces
• decode: Boolean - Whether to decode HTML entities

rich-text

The rich-text component is used to display rich text content.

<template>
  <view>
    <rich-text :nodes="htmlContent"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>This is <strong>rich text</strong> content</p>'
    }
  }
}
</script>

View Components

view

The view component is the most basic container component, similar to div in HTML.

<template>
  <view class="container">
    <view class="header">Header Content</view>
    <view class="content">Main Content</view>
    <view class="footer">Footer Content</view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: #f0f0f0;
  padding: 20px;
}

.content {
  flex: 1;
  padding: 20px;
}

.footer {
  background-color: #e0e0e0;
  padding: 20px;
}
</style>

scroll-view

The scroll-view component provides a scrollable view area.

<template>
  <view>
    <!-- Vertical scrolling -->
    <scroll-view 
      scroll-y 
      class="scroll-area"
      @scrolltoupper="onScrollToUpper"
      @scrolltolower="onScrollToLower"
    >
      <view v-for="item in items" :key="item.id" class="item">
        {{ item.name }}
      </view>
    </scroll-view>
    
    <!-- Horizontal scrolling -->
    <scroll-view scroll-x class="horizontal-scroll">
      <view class="horizontal-item" v-for="item in horizontalItems" :key="item.id">
        {{ item.name }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // ... more items
      ],
      horizontalItems: [
        { id: 1, name: 'Horizontal Item 1' },
        { id: 2, name: 'Horizontal Item 2' },
        // ... more items
      ]
    }
  },
  methods: {
    onScrollToUpper() {
      console.log('Scrolled to top')
    },
    onScrollToLower() {
      console.log('Scrolled to bottom')
      // Load more data here
    }
  }
}
</script>

<style>
.scroll-area {
  height: 300px;
  border: 1px solid #ccc;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.horizontal-scroll {
  white-space: nowrap;
  border: 1px solid #ccc;
}

.horizontal-item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}
</style>

Image Component

image

The image component is used to display images.

<template>
  <view>
    <!-- Basic image -->
    <image src="/static/logo.png" class="logo"></image>
    
    <!-- Image with loading states -->
    <image 
      :src="imageUrl" 
      mode="aspectFit"
      @load="onImageLoad"
      @error="onImageError"
      class="dynamic-image"
    ></image>
    
    <!-- Lazy loading image -->
    <image 
      :src="lazyImageUrl" 
      lazy-load
      class="lazy-image"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      lazyImageUrl: 'https://example.com/lazy-image.jpg'
    }
  },
  methods: {
    onImageLoad(e) {
      console.log('Image loaded successfully', e.detail)
    },
    onImageError(e) {
      console.log('Image failed to load', e.detail)
    }
  }
}
</script>

<style>
.logo {
  width: 100px;
  height: 100px;
}

.dynamic-image {
  width: 100%;
  height: 200px;
}

.lazy-image {
  width: 100%;
  height: 150px;
}
</style>

Image Modes

• scaleToFill: Scale to fill
• aspectFit: Scale maintaining aspect ratio to fit
• aspectFill: Scale maintaining aspect ratio to fill
• widthFix: Width fixed, height auto
• heightFix: Height fixed, width auto

Button Component

button

The button component provides various styles and functionality for buttons.

<template>
  <view class="button-container">
    <!-- Basic button -->
    <button @click="handleClick">Default Button</button>
    
    <!-- Different button types -->
    <button type="primary" @click="handlePrimary">Primary Button</button>
    <button type="warn" @click="handleWarn">Warning Button</button>
    
    <!-- Different button sizes -->
    <button size="mini" @click="handleMini">Mini Button</button>
    <button size="default" @click="handleDefault">Default Button</button>
    
    <!-- Disabled button -->
    <button disabled>Disabled Button</button>
    
    <!-- Loading button -->
    <button :loading="isLoading" @click="handleLoading">
      {{ isLoading ? 'Loading...' : 'Click to Load' }}
    </button>
    
    <!-- Custom styled button -->
    <button class="custom-button" @click="handleCustom">Custom Button</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    handleClick() {
      console.log('Default button clicked')
    },
    handlePrimary() {
      uni.showToast({
        title: 'Primary button clicked',
        icon: 'success'
      })
    },
    handleWarn() {
      uni.showModal({
        title: 'Warning',
        content: 'This is a warning button',
        showCancel: false
      })
    },
    handleMini() {
      console.log('Mini button clicked')
    },
    handleDefault() {
      console.log('Default size button clicked')
    },
    handleLoading() {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
        uni.showToast({
          title: 'Loading complete',
          icon: 'success'
        })
      }, 2000)
    },
    handleCustom() {
      console.log('Custom button clicked')
    }
  }
}
</script>

<style>
.button-container {
  padding: 20px;
}

.button-container button {
  margin-bottom: 10px;
}

.custom-button {
  background-color: #ff6b6b;
  color: white;
  border-radius: 20px;
  border: none;
}
</style>

Icon Component

icon

The icon component is used to display built-in icons.

<template>
  <view class="icon-container">
    <!-- Basic icons -->
    <icon type="success" size="30"></icon>
    <icon type="info" size="30" color="#007aff"></icon>
    <icon type="warn" size="30" color="#ff9500"></icon>
    <icon type="cancel" size="30" color="#dd524d"></icon>
    
    <!-- Custom color and size -->
    <icon type="search" size="40" color="#333"></icon>
    <icon type="clear" size="25" color="#999"></icon>
  </view>
</template>

<style>
.icon-container {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
}
</style>

Progress Component

progress

The progress component is used to display progress bars.

<template>
  <view class="progress-container">
    <!-- Basic progress bar -->
    <progress :percent="percent1" show-info></progress>
    
    <!-- Custom color progress bar -->
    <progress 
      :percent="percent2" 
      color="#ff6b6b" 
      backgroundColor="#f0f0f0"
      show-info
    ></progress>
    
    <!-- Rounded progress bar -->
    <progress 
      :percent="percent3" 
      stroke-width="8"
      show-info
      border-radius="10"
    ></progress>
    
    <!-- Control buttons -->
    <view class="button-group">
      <button @click="increaseProgress">Increase Progress</button>
      <button @click="resetProgress">Reset Progress</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      percent1: 30,
      percent2: 60,
      percent3: 80
    }
  },
  methods: {
    increaseProgress() {
      this.percent1 = Math.min(this.percent1 + 10, 100)
      this.percent2 = Math.min(this.percent2 + 10, 100)
      this.percent3 = Math.min(this.percent3 + 10, 100)
    },
    resetProgress() {
      this.percent1 = 0
      this.percent2 = 0
      this.percent3 = 0
    }
  }
}
</script>

<style>
.progress-container {
  padding: 20px;
}

.progress-container progress {
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.button-group button {
  flex: 1;
}
</style>

Best Practices

1. Component Selection

• Use appropriate component types for required functionality
• Prefer uni-app built-in components over HTML tags
• Consider cross-platform compatibility

2. Performance Optimization

• Use image lazy loading appropriately
• Avoid placing too many elements in scroll-view
• Use conditional rendering to optimize long lists

3. Style Design

• Use flex layout for responsive design
• Maintain consistent visual style
• Consider adaptation for different screen sizes

4. Event Handling

• Use event listeners appropriately
• Avoid binding too many events in loops
• Clean up unnecessary event listeners promptly

Summary

Basic components are the foundation for building uni-app applications. Mastering the usage and best practices of these components helps developers create high-quality, cross-platform applications. During usage, pay attention to component property configuration, event handling, and style design to ensure applications provide good user experience across different platforms.