内置组件（view、scroll-view、swiper 等）

作者：陈川阅读数：56037人阅读分类： uni-app

uni-app 提供了一系列内置组件，这些组件可以满足大部分开发需求，跨平台兼容性强，开发者无需关心底层差异。内置组件包括基础容器、滚动容器、滑块视图等，它们在不同场景下发挥着重要作用。

view 组件

view 是 uni-app 中最基础的容器组件，类似于 HTML 中的 div 标签。它支持 flex 布局，可以嵌套其他组件或内容。view 组件常用于构建页面结构，支持样式绑定和事件处理。

<template>
  <view class="container">
    <view class="box" @click="handleClick">点击我</view>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      uni.showToast({
        title: '点击事件触发'
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box {
  width: 200rpx;
  height: 200rpx;
  background-color: #007AFF;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

view 组件支持 hover-class 属性，可以在触摸时添加样式类：

<view hover-class="hover-style" class="normal-style">
  触摸我会变色
</view>

<style>
.normal-style {
  background-color: #f0f0f0;
}
.hover-style {
  background-color: #e0e0e0;
}
</style>

scroll-view 组件

scroll-view 是可滚动视图区域组件，用于处理内容超出容器大小的情况。它支持横向和纵向滚动，并且可以监听滚动事件。

基本纵向滚动示例：

<scroll-view scroll-y style="height: 300px;">
  <view style="height: 800px; background-color: #f0f0f0;">
    很长很长的内容
  </view>
</scroll-view>

横向滚动示例：

<scroll-view scroll-x style="white-space: nowrap; width: 100%;">
  <view style="display: inline-block; width: 200px; height: 100px; background-color: red; margin-right: 10px;"></view>
  <view style="display: inline-block; width: 200px; height: 100px; background-color: green; margin-right: 10px;"></view>
  <view style="display: inline-block; width: 200px; height: 100px; background-color: blue;"></view>
</scroll-view>

scroll-view 还支持滚动到指定位置的功能：

<scroll-view scroll-y :scroll-top="scrollTop" style="height: 300px;">
  <view v-for="item in 50" :key="item" style="height: 50px; line-height: 50px;">
    项目 {{item}}
  </view>
</scroll-view>
<button @click="scrollToTop">滚动到顶部</button>

<script>
export default {
  data() {
    return {
      scrollTop: 0
    }
  },
  methods: {
    scrollToTop() {
      this.scrollTop = 0
    }
  }
}
</script>

swiper 组件

swiper 是滑块视图容器，常用于实现轮播图效果。它支持自动播放、循环滑动、指示器等特性。

基本轮播图示例：

<swiper :autoplay="true" :interval="3000" :duration="500" indicator-dots>
  <swiper-item>
    <view class="swiper-item" style="background-color: red;">第一页</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item" style="background-color: green;">第二页</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item" style="background-color: blue;">第三页</view>
  </swiper-item>
</swiper>

<style>
.swiper-item {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
</style>

swiper 组件还支持垂直方向滑动：

<swiper :vertical="true" style="height: 300px;">
  <swiper-item>
    <view class="swiper-item" style="background-color: #f0f0f0;">上</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item" style="background-color: #e0e0e0;">中</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item" style="background-color: #d0d0d0;">下</view>
  </swiper-item>
</swiper>

text 组件

text 是文本组件，用于显示文本内容。与直接使用 view 显示文本不同，text 组件支持长按选中、复制等功能。

<text selectable>这段文字可以长按选中</text>
<text space="ensp">这段文字 有 空格</text>
<text decode>&nbsp;&lt;&gt;&amp;&apos;&ensp;&emsp;</text>

text 组件还支持嵌套和样式继承：

<text style="font-size: 16px; color: #333;">
  父文本
  <text style="color: red;">子文本</text>
</text>

image 组件

image 是图片组件，支持多种图片格式和加载模式。它比 HTML 的 img 标签功能更丰富。

<image src="/static/logo.png" mode="aspectFit" lazy-load></image>

image 组件支持多种 mode 属性值：

scaleToFill：不保持纵横比缩放图片
aspectFit：保持纵横比缩放图片
aspectFill：保持纵横比缩放图片
widthFix：宽度不变，高度自动变化
heightFix：高度不变，宽度自动变化

加载失败处理示例：

<image :src="imageUrl" @error="handleImageError"></image>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  },
  methods: {
    handleImageError(e) {
      console.log('图片加载失败', e)
      this.imageUrl = '/static/default-image.jpg'
    }
  }
}
</script>

navigator 组件

navigator 是页面链接组件，用于实现页面跳转。它支持多种跳转方式和传参。

<navigator url="/pages/home/home" open-type="navigate">跳转到首页</navigator>
<navigator url="/pages/about/about" open-type="redirect">重定向到关于页</navigator>
<navigator url="/pages/detail/detail?id=123" open-type="navigate">带参数跳转</navigator>

open-type 支持的值：

navigate：保留当前页面，跳转到应用内的某个页面
redirect：关闭当前页面，跳转到应用内的某个页面
switchTab：跳转到 tabBar 页面
reLaunch：关闭所有页面，打开到应用内的某个页面
navigateBack：关闭当前页面，返回上一页面或多级页面
exit：退出小程序

button 组件

button 是按钮组件，支持多种样式和开放能力。

<button type="primary">主要按钮</button>
<button type="default" plain>默认按钮</button>
<button type="warn">警告按钮</button>
<button open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>

button 组件支持 loading 状态：

<button :loading="isLoading" @click="handleSubmit">提交</button>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    handleSubmit() {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    }
  }
}
</script>

input 组件

input 是输入框组件，支持多种输入类型和功能。

<input v-model="username" placeholder="请输入用户名" />
<input type="number" v-model="age" placeholder="请输入年龄" />
<input password v-model="password" placeholder="请输入密码" />
<input type="idcard" v-model="idCard" placeholder="请输入身份证号" />

input 组件支持确认事件：

<input v-model="searchText" @confirm="handleSearch" placeholder="输入后按回车搜索" />

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleSearch() {
      uni.showToast({
        title: `搜索: ${this.searchText}`
      })
    }
  }
}
</script>

checkbox 和 radio 组件

checkbox 是多选框组件，radio 是单选框组件。

<checkbox-group @change="checkboxChange">
  <label>
    <checkbox value="apple" checked />苹果
  </label>
  <label>
    <checkbox value="banana" />香蕉
  </label>
</checkbox-group>

<radio-group @change="radioChange">
  <label>
    <radio value="male" checked />男
  </label>
  <label>
    <radio value="female" />女
  </label>
</radio-group>

<script>
export default {
  methods: {
    checkboxChange(e) {
      console.log('选中的值:', e.detail.value)
    },
    radioChange(e) {
      console.log('选中的值:', e.detail.value)
    }
  }
}
</script>

picker 组件

picker 是滚动选择器组件，支持普通选择器、时间选择器、日期选择器等。

普通选择器示例：

<picker :range="options" @change="handlePickerChange">
  <view>当前选择: {{options[selectedIndex]}}</view>
</picker>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedIndex: 0
    }
  },
  methods: {
    handlePickerChange(e) {
      this.selectedIndex = e.detail.value
    }
  }
}
</script>

日期选择器示例：

<picker mode="date" :value="date" start="2010-01-01" end="2030-12-31" @change="dateChange">
  <view>选择日期: {{date}}</view>
</picker>

<script>
export default {
  data() {
    return {
      date: '2023-01-01'
    }
  },
  methods: {
    dateChange(e) {
      this.date = e.detail.value
    }
  }
}
</script>

switch 组件

switch 是开关选择器组件。

<switch :checked="isChecked" @change="switchChange" color="#ff0000" />
<view>当前状态: {{isChecked ? '开' : '关'}}</view>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    switchChange(e) {
      this.isChecked = e.detail.value
    }
  }
}
</script>

slider 组件

slider 是滑动选择器组件。

<slider :value="sliderValue" min="0" max="100" @change="sliderChange" activeColor="#ff0000" />
<view>当前值: {{sliderValue}}</view>

<script>
export default {
  data() {
    return {
      sliderValue: 50
    }
  },
  methods: {
    sliderChange(e) {
      this.sliderValue = e.detail.value
    }
  }
}
</script>

textarea 组件

textarea 是多行输入框组件。

<textarea v-model="content" placeholder="请输入内容" auto-height maxlength="200" />
<view>已输入 {{content.length}}/200 字</view>

<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>

progress 组件

progress 是进度条组件。

<progress :percent="progressPercent" show-info stroke-width="5" />
<button @click="addProgress">增加进度</button>

<script>
export default {
  data() {
    return {
      progressPercent: 0
    }
  },
  methods: {
    addProgress() {
      if (this.progressPercent < 100) {
        this.progressPercent += 10
      }
    }
  }
}
</script>

组件样式与平台差异

uni-app 的内置组件在不同平台上可能会有细微的样式差异。为了确保一致的外观，可以使用条件编译或统一样式覆盖。

<style>
/* 通用样式 */
.button {
  padding: 10px 15px;
}

/* 小程序特有样式 */
/* #ifdef MP-WEIXIN */
.button {
  border-radius: 4px;
}
/* #endif */

/* H5特有样式 */
/* #ifdef H5 */
.button {
  border-radius: 8px;
}
/* #endif */
</style>

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：样式与布局（rpx 单位、Flex 布局）

下一篇：表单组件（input、checkbox、picker 等）