uni-app開發指南

繁體中文

简体中文
English

繁體中文

简体中文
English

主題

uni-app 基礎元件指南 ​

本指南詳細介紹uni-app的基礎元件，包括視圖容器和基礎內容元件的使用方法。

目錄 ​

視圖容器元件 ​

視圖容器元件是建構頁面佈局的基礎，提供了各種容器和佈局能力。

view 視圖容器 ​

view 是最基礎的視圖容器元件，類似於HTML中的div元素。

主要屬性 ​

屬性名類型預設值說明
hover-classStringnone指定按下去的樣式類
hover-stop-propagationBooleanfalse指定是否阻止本節點的祖先節點出現點擊態
hover-start-timeNumber50按住後多久出現點擊態，單位毫秒
hover-stay-timeNumber400手指鬆開後點擊態保留時間，單位毫秒

使用範例 ​

基礎用法

vue
<template>
  <view class="container">
    <view class="box">基礎視圖容器</view>
  </view>
</template>

<style>
.container {
  padding: 20px;
}
.box {
  background-color: #42b983;
  color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}
</style>

hover效果

vue
<template>
  <view class="container">
    <view class="box" hover-class="box-hover">
      點擊我查看hover效果
    </view>
  </view>
</template>

<style>
.box {
  background-color: #42b983;
  color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  transition: all 0.3s;
}
.box-hover {
  background-color: #35495e;
  transform: scale(0.95);
}
</style>

嵌套佈局

vue
<template>
  <view class="container">
    <view class="card">
      <view class="card-header">卡片標題</view>
      <view class="card-body">
        <view class="card-item">項目1</view>
        <view class="card-item">項目2</view>
        <view class="card-item">項目3</view>
      </view>
      <view class="card-footer">卡片底部</view>
    </view>
  </view>
</template>

<style>
.card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
}
.card-header, .card-footer {
  background-color: #f8f9fa;
  padding: 15px;
  font-weight: bold;
}
.card-body {
  padding: 15px;
}
.card-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.card-item:last-child {
  border-bottom: none;
}
</style>

scroll-view 可滾動視圖 ​

scroll-view 是可滾動的視圖區域元件，用於展示超出容器的內容。

主要屬性 ​

屬性名類型預設值說明
scroll-xBooleanfalse允許橫向滾動
scroll-yBooleanfalse允許縱向滾動
upper-thresholdNumber50距頂部/左邊多遠時觸發scrolltoupper事件
lower-thresholdNumber50距底部/右邊多遠時觸發scrolltolower事件
scroll-topNumber-設定豎向滾動條位置
scroll-leftNumber-設定橫向滾動條位置
refresher-enabledBooleanfalse開啟下拉重新整理

使用範例 ​

橫向滾動

vue
<template>
  <view class="container">
    <scroll-view class="scroll-view-h" scroll-x>
      <view class="scroll-item" v-for="n in 10" :key="n">
        項目{{ n }}
      </view>
    </scroll-view>
  </view>
</template>

<style>
.scroll-view-h {
  white-space: nowrap;
  width: 100%;
}
.scroll-item {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin-right: 10px;
  background-color: #42b983;
  color: #fff;
  text-align: center;
  line-height: 150px;
  border-radius: 8px;
}
</style>

縱向滾動

vue
<template>
  <view class="container">
    <scroll-view 
      class="scroll-view-v" 
      scroll-y 
      :scroll-top="scrollTop"
      @scrolltoupper="onScrollToUpper"
      @scrolltolower="onScrollToLower"
    >
      <view class="scroll-item-v" v-for="n in 20" :key="n">
        項目{{ n }}
      </view>
    </scroll-view>
    <button @click="scrollToTop">回到頂部</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0
    }
  },
  methods: {
    onScrollToUpper() {
      console.log('滾動到頂部')
    },
    onScrollToLower() {
      console.log('滾動到底部')
    },
    scrollToTop() {
      this.scrollTop = 0
    }
  }
}
</script>

<style>
.scroll-view-v {
  height: 300px;
}
.scroll-item-v {
  height: 100px;
  margin-bottom: 10px;
  background-color: #42b983;
  color: #fff;
  text-align: center;
  line-height: 100px;
  border-radius: 8px;
}
</style>

下拉重新整理

vue
<template>
  <view class="container">
    <scroll-view 
      class="scroll-view-v" 
      scroll-y 
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
    >
      <view class="scroll-item-v" v-for="item in list" :key="item.id">
        {{ item.text }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      triggered: false,
      list: [
        { id: 1, text: '項目1' },
        { id: 2, text: '項目2' },
        { id: 3, text: '項目3' }
      ]
    }
  },
  methods: {
    onRefresh() {
      if (this._refreshing) return
      this._refreshing = true
      
      setTimeout(() => {
        const newItem = { 
          id: Date.now(), 
          text: `新項目${Math.floor(Math.random() * 100)}` 
        }
        this.list.unshift(newItem)
        this.triggered = false
        this._refreshing = false
      }, 2000)
    }
  }
}
</script>

swiper 滑塊視圖容器 ​

swiper 是滑塊視圖容器元件，用於實現輪播圖等效果。

主要屬性 ​

屬性名類型預設值說明
indicator-dotsBooleanfalse是否顯示面板指示點
indicator-colorColorrgba(0,0,0,.3)指示點顏色
indicator-active-colorColor#000000當前選中的指示點顏色
autoplayBooleanfalse是否自動切換
currentNumber0當前所在滑塊的index
intervalNumber5000自動切換時間間隔
durationNumber500滑動動畫時長
circularBooleanfalse是否採用銜接滑動
verticalBooleanfalse滑動方向是否為縱向

使用範例 ​

基礎輪播圖

vue
<template>
  <view class="container">
    <swiper 
      class="swiper" 
      indicator-dots 
      autoplay 
      interval="3000" 
      duration="500"
    >
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill" class="swiper-image" />
        <view class="swiper-text">{{ item.title }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        { image: '/static/banner1.jpg', title: '輪播圖1' },
        { image: '/static/banner2.jpg', title: '輪播圖2' },
        { image: '/static/banner3.jpg', title: '輪播圖3' }
      ]
    }
  }
}
</script>

<style>
.swiper {
  height: 200px;
}
.swiper-image {
  width: 100%;
  height: 100%;
}
.swiper-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
</style>

縱向滑動

vue
<template>
  <view class="container">
    <swiper 
      class="swiper-vertical" 
      indicator-dots 
      vertical 
      autoplay 
      interval="2000"
    >
      <swiper-item v-for="(item, index) in news" :key="index">
        <view class="news-item">
          <text class="news-title">{{ item.title }}</text>
          <text class="news-time">{{ item.time }}</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { title: '重要新聞標題1', time: '2023-12-01' },
        { title: '重要新聞標題2', time: '2023-12-02' },
        { title: '重要新聞標題3', time: '2023-12-03' }
      ]
    }
  }
}
</script>

<style>
.swiper-vertical {
  height: 80px;
}
.news-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  background-color: #f8f9fa;
}
.news-title {
  font-size: 16px;
  color: #333;
}
.news-time {
  font-size: 12px;
  color: #999;
}
</style>

movable-area 和 movable-view 可移動視圖 ​

movable-area 和 movable-view 組合使用，實現可拖拽移動的視圖元件。

主要屬性 ​

movable-area 屬性

屬性名類型預設值說明
scale-areaBooleanfalse當裡面的movable-view設定為支援雙指縮放時，設定此值可將縮放手勢生效區域修改為整個movable-area

movable-view 屬性

屬性名類型預設值說明
directionStringnone移動方向，屬性值有all、vertical、horizontal、none
inertiaBooleanfalse是否帶有慣性
out-of-boundsBooleanfalse超過可移動區域後，是否還可以移動
xNumber-定義x軸方向的偏移
yNumber-定義y軸方向的偏移
dampingNumber20阻尼係數，用於控制x或y改變時的動畫和過界回彈的動畫
frictionNumber2摩擦係數，用於控制慣性滑動的動畫
disabledBooleanfalse是否禁用
scaleBooleanfalse是否支援雙指縮放
scale-minNumber0.5定義縮放倍數最小值
scale-maxNumber10定義縮放倍數最大值
scale-valueNumber1定義縮放倍數，取值範圍為 0.5 - 10

使用範例 ​

基礎拖拽

vue
<template>
  <view class="container">
    <movable-area class="movable-area">
      <movable-view 
        class="movable-view" 
        direction="all" 
        inertia
        :x="x" 
        :y="y"
        @change="onChange"
      >
        拖拽我
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0
    }
  },
  methods: {
    onChange(e) {
      console.log('位置改變:', e.detail)
    }
  }
}
</script>

<style>
.movable-area {
  height: 400px;
  width: 100%;
  background-color: #f8f9fa;
  position: relative;
}
.movable-view {
  height: 80px;
  width: 80px;
  background-color: #42b983;
  color: #fff;
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
}
</style>

支援縮放的拖拽

vue
<template>
  <view class="container">
    <movable-area class="movable-area" scale-area>
      <movable-view 
        class="movable-view-scale" 
        direction="all" 
        scale 
        :scale-min="0.5" 
        :scale-max="3"
        :scale-value="scaleValue"
        @scale="onScale"
      >
        <image src="/static/logo.png" mode="aspectFit" class="movable-image" />
      </movable-view>
    </movable-area>
    
    <view class="controls">
      <button @click="resetScale">重置縮放</button>
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">縮小</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scaleValue: 1
    }
  },
  methods: {
    onScale(e) {
      console.log('縮放改變:', e.detail.scale)
    },
    resetScale() {
      this.scaleValue = 1
    },
    zoomIn() {
      this.scaleValue = Math.min(this.scaleValue + 0.2, 3)
    },
    zoomOut() {
      this.scaleValue = Math.max(this.scaleValue - 0.2, 0.5)
    }
  }
}
</script>

<style>
.movable-area {
  height: 400px;
  width: 100%;
  background-color: #f8f9fa;
}
.movable-view-scale {
  height: 150px;
  width: 150px;
}
.movable-image {
  width: 100%;
  height: 100%;
}
.controls {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>

cover-view 和 cover-image 覆蓋視圖 ​

cover-view 和 cover-image 是覆蓋在原生元件之上的文字視圖和圖片視圖。

主要屬性 ​

cover-view 屬性

屬性名類型預設值說明
scroll-topNumber-設定頂部滾動偏移量

cover-image 屬性

屬性名類型預設值說明
srcString-圖片路徑

使用範例 ​

視頻播放器覆蓋控制項

vue
<template>
  <view class="container">
    <video 
      class="video" 
      :src="videoSrc" 
      :controls="false"
      @play="onPlay"
      @pause="onPause"
    >
      <cover-view class="video-controls" v-if="showControls">
        <cover-view class="control-bar">
          <cover-image 
            :src="isPlaying ? '/static/pause.png' : '/static/play.png'"
            class="control-btn"
            @click="togglePlay"
          />
          <cover-view class="progress-bar">
            <cover-view class="progress" :style="{ width: progress + '%' }"></cover-view>
          </cover-view>
          <cover-view class="time-display">
            {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
          </cover-view>
        </cover-view>
        
        <cover-view class="video-title">
          {{ videoTitle }}
        </cover-view>
      </cover-view>
    </video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '/static/sample-video.mp4',
      videoTitle: '範例影片',
      isPlaying: false,
      showControls: true,
      currentTime: 0,
      duration: 100,
      progress: 0
    }
  },
  methods: {
    onPlay() {
      this.isPlaying = true
    },
    onPause() {
      this.isPlaying = false
    },
    togglePlay() {
      if (this.isPlaying) {
        // 暫停影片
        this.isPlaying = false
      } else {
        // 播放影片
        this.isPlaying = true
      }
    },
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    }
  }
}
</script>

<style>
.video {
  width: 100%;
  height: 200px;
  position: relative;
}
.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 20px;
}
.control-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.control-btn {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.progress-bar {
  flex: 1;
  height: 4px;
  background-color: rgba(255,255,255,0.3);
  border-radius: 2px;
  margin-right: 10px;
}
.progress {
  height: 100%;
  background-color: #42b983;
  border-radius: 2px;
}
.time-display {
  color: #fff;
  font-size: 12px;
}
.video-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
</style>

基礎內容元件 ​

基礎內容元件用於展示文字、圖片等基礎內容。

text 文字元件 ​

text 元件用於顯示文字內容，支援多種文字樣式和選擇功能。

主要屬性 ​

屬性名類型預設值說明
selectableBooleanfalse文字是否可選
user-selectBooleanfalse文字是否可選，該屬性會使文字節點顯示為inline-block
spaceString-顯示連續空格，可選值：ensp、emsp、nbsp
decodeBooleanfalse是否解碼

使用範例 ​

基礎文字顯示

vue
<template>
  <view class="container">
    <text class="title">這是標題文字</text>
    <text class="content">這是內容文字，支援多行顯示和各種樣式設定。</text>
    <text class="selectable" selectable>這段文字可以被選擇複製</text>
  </view>
</template>

<style>
.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}
.content {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
  display: block;
}
.selectable {
  font-size: 14px;
  color: #42b983;
  background-color: #f0f9ff;
  padding: 10px;
  border-radius: 4px;
  display: block;
}
</style>

空格處理

vue
<template>
  <view class="container">
    <text class="space-demo">普通空格:    多個空格</text>
    <text class="space-demo" space="ensp">ensp空格:    多個空格</text>
    <text class="space-demo" space="emsp">emsp空格:    多個空格</text>
    <text class="space-demo" space="nbsp">nbsp空格:    多個空格</text>
  </view>
</template>

<style>
.space-demo {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}
</style>

文字裝飾效果

vue
<template>
  <view class="container">
    <text class="text-bold">粗體文字</text>
    <text class="text-italic">斜體文字</text>
    <text class="text-underline">底線文字</text>
    <text class="text-strike">刪除線文字</text>
    <text class="text-gradient">漸層文字</text>
  </view>
</template>

<style>
.text-bold {
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}
.text-italic {
  font-style: italic;
  display: block;
  margin-bottom: 10px;
}
.text-underline {
  text-decoration: underline;
  display: block;
  margin-bottom: 10px;
}
.text-strike {
  text-decoration: line-through;
  display: block;
  margin-bottom: 10px;
}
.text-gradient {
  background: linear-gradient(45deg, #42b983, #35495e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}
</style>

rich-text 富文字元件 ​

rich-text 元件用於顯示富文字內容，支援HTML標籤和樣式。

主要屬性 ​

屬性名類型預設值說明
nodesArray/String[]節點列表/HTML String
spaceString-顯示連續空格
selectableBooleanfalse富文字是否可以長按選中

使用範例 ​

HTML字串渲染

vue
<template>
  <view class="container">
    <rich-text :nodes="htmlString" class="rich-content"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlString: `
        <div style="text-align: center;">
          <h2 style="color: #42b983;">富文字標題</h2>
          <p>這是一段包含<strong>粗體</strong>和<em>斜體</em>的文字。</p>
          <p style="color: #666;">支援<span style="color: red;">顏色</span>和<span style="background-color: yellow;">背景色</span>。</p>
          <ul>
            <li>列表項目1</li>
            <li>列表項目2</li>
            <li>列表項目3</li>
          </ul>
        </div>
      `
    }
  }
}
</script>

<style>
.rich-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

節點陣列渲染

vue
<template>
  <view class="container">
    <rich-text :nodes="nodes" class="rich-content"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nodes: [
        {
          name: 'div',
          attrs: {
            style: 'text-align: center; padding: 20px;'
          },
          children: [
            {
              name: 'h3',
              attrs: {
                style: 'color: #42b983; margin-bottom: 15px;'
              },
              children: [
                {
                  type: 'text',
                  text: '節點陣列渲染'
                }
              ]
            },
            {
              name: 'p',
              attrs: {
                style: 'margin-bottom: 10px;'
              },
              children: [
                {
                  type: 'text',
                  text: '這是透過節點陣列渲染的富文字內容。'
                }
              ]
            },
            {
              name: 'div',
              attrs: {
                style: 'display: flex; justify-content: space-around; margin-top: 20px;'
              },
              children: [
                {
                  name: 'span',
                  attrs: {
                    style: 'color: #42b983; font-weight: bold;'
                  },
                  children: [
                    {
                      type: 'text',
                      text: '綠色文字'
                    }
                  ]
                },
                {
                  name: 'span',
                  attrs: {
                    style: 'color: #e74c3c; font-weight: bold;'
                  },
                  children: [
                    {
                      type: 'text',
                      text: '紅色文字'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

progress 進度條元件 ​

progress 元件用於顯示操作的當前進度。

主要屬性 ​

屬性名類型預設值說明
percentNumber0百分比0~100
show-infoBooleanfalse在進度條右側顯示百分比
border-radiusNumber0圓角大小
font-sizeNumber16右側百分比字型大小
stroke-widthNumber6進度條線的寬度
colorString#09BB07進度條顏色
activeColorString#09BB07已選擇的進度條的顏色
backgroundColorString#EBEBEB未選擇的進度條的顏色
activeBooleanfalse進度條從左往右的動畫
active-modeStringbackwardsbackwards: 動畫從頭播；forwards：動畫從上次結束點接著播

使用範例 ​

基礎進度條

vue
<template>
  <view class="container">
    <view class="progress-item">
      <text class="progress-label">基礎進度條</text>
      <progress :percent="progress1" show-info />
    </view>
    
    <view class="progress-item">
      <text class="progress-label">自訂顏色</text>
      <progress 
        :percent="progress2" 
        show-info 
        color="#42b983"
        background-color="#f0f0f0"
      />
    </view>
    
    <view class="progress-item">
      <text class="progress-label">圓角進度條</text>
      <progress 
        :percent="progress3" 
        show-info 
        :border-radius="10"
        :stroke-width="10"
        color="#e74c3c"
      />
    </view>
    
    <view class="progress-item">
      <text class="progress-label">動畫進度條</text>
      <progress 
        :percent="progress4" 
        show-info 
        active
        color="#f39c12"
      />
    </view>
    
    <view class="controls">
      <button @click="updateProgress">更新進度</button>
      <button @click="resetProgress">重置進度</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress1: 30,
      progress2: 50,
      progress3: 70,
      progress4: 0
    }
  },
  methods: {
    updateProgress() {
      this.progress1 = Math.min(this.progress1 + 10, 100)
      this.progress2 = Math.min(this.progress2 + 15, 100)
      this.progress3 = Math.min(this.progress3 + 5, 100)
      this.progress4 = Math.min(this.progress4 + 20, 100)
    },
    resetProgress() {
      this.progress1 = 0
      this.progress2 = 0
      this.progress3 = 0
      this.progress4 = 0
    }
  }
}
</script>

<style>
.progress-item {
  margin-bottom: 20px;
}
.progress-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}
.controls {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
</style>

檔案上傳進度

vue
<template>
  <view class="container">
    <view class="upload-area" @click="chooseFile">
      <text class="upload-text">點擊選擇檔案</text>
    </view>
    
    <view class="file-list" v-if="files.length > 0">
      <view class="file-item" v-for="(file, index) in files" :key="index">
        <view class="file-info">
          <text class="file-name">{{ file.name }}</text>
          <text class="file-size">{{ formatFileSize(file.size) }}</text>
        </view>
        <progress 
          :percent="file.progress" 
          show-info 
          :color="file.progress === 100 ? '#42b983' : '#409eff'"
          class="file-progress"
        />
        <text class="file-status">
          {{ file.progress === 100 ? '上傳完成' : '上傳中...' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      files: []
    }
  },
  methods: {
    chooseFile() {
      uni.chooseFile({
        count: 5,
        success: (res) => {
          res.tempFiles.forEach(file => {
            const fileItem = {
              name: file.name,
              size: file.size,
              path: file.path,
              progress: 0
            }
            this.files.push(fileItem)
            this.uploadFile(fileItem)
          })
        }
      })
    },
    
    uploadFile(file) {
      const uploadTask = uni.uploadFile({
        url: 'https://example.com/upload',
        filePath: file.path,
        name: 'file',
        success: (res) => {
          console.log('上傳成功', res)
        },
        fail: (err) => {
          console.error('上傳失敗', err)
        }
      })
      
      uploadTask.onProgressUpdate((res) => {
        file.progress = res.progress
      })
    },
    
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }
  }
}
</script>

<style>
.upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  margin-bottom: 20px;
  background-color: #fafafa;
}
.upload-text {
  color: #666;
  font-size: 16px;
}
.file-item {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #fff;
}
.file-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.file-name {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.file-size {
  font-size: 12px;
  color: #999;
}
.file-progress {
  margin-bottom: 8px;
}
.file-status {
  font-size: 12px;
  color: #666;
  text-align: right;
}
</style>

總結 ​

本指南介紹了uni-app中最常用的基礎元件，包括：

  1. 視圖容器元件：提供頁面佈局和容器功能

    • view：基礎視圖容器
    • scroll-view：可滾動視圖
    • swiper：滑塊視圖容器
    • movable-area/movable-view：可移動視圖
    • cover-view/cover-image：覆蓋視圖

  2. 基礎內容元件：用於展示基礎內容

    • text：文字元件
    • rich-text：富文字元件
    • progress：進度條元件

這些元件是構建uni-app應用的基礎，熟練掌握它們的使用方法對於開發高品質的跨平台應用至關重要。在實際開發中，建議根據具體需求選擇合適的元件，並結合CSS樣式實現理想的視覺效果。

更多詳細資訊請參考 uni-app官方文檔。

一次開發，多端部署 - 讓跨平台開發更簡單

Copyright © 2025 yanshengcha.com | Sitemap