uView UI 框架的使用

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

uView UI 框架简介

uView UI 是一套基于 uni-app 的多端 UI 组件库，专为快速开发跨平台应用而设计。它提供了丰富的组件和工具，能够显著提升开发效率，同时保持统一的视觉风格。uView UI 支持 H5、小程序、App 等多个平台，与 uni-app 深度集成，开发者可以轻松构建高质量的跨平台应用。

安装与配置

通过 npm 安装

在项目根目录下执行以下命令安装 uView UI：

npm install uview-ui

引入 uView UI

在 main.js 文件中引入 uView UI 并注册：

import uView from 'uview-ui';
Vue.use(uView);

配置 SCSS

在 uni.scss 文件中引入 uView 的主题样式：

@import 'uview-ui/theme.scss';

配置 easycom

在 pages.json 中配置 easycom，实现组件自动引入：

{
  "easycom": {
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
  }
}

基本组件使用

按钮组件

uView 提供了多种样式的按钮组件：

<template>
  <view>
    <u-button type="primary">主要按钮</u-button>
    <u-button type="success">成功按钮</u-button>
    <u-button type="error">错误按钮</u-button>
    <u-button type="warning">警告按钮</u-button>
    <u-button type="info">信息按钮</u-button>
  </view>
</template>

按钮支持多种属性配置：

<u-button 
  type="primary" 
  size="mini" 
  shape="circle" 
  :disabled="true"
  icon="heart-fill"
>
  带图标的小圆角按钮
</u-button>

表单组件

uView 提供了完整的表单解决方案：

<template>
  <u-form :model="form" ref="uForm">
    <u-form-item label="用户名" prop="username">
      <u-input v-model="form.username" />
    </u-form-item>
    <u-form-item label="密码" prop="password">
      <u-input v-model="form.password" type="password" />
    </u-form-item>
    <u-form-item label="性别" prop="gender">
      <u-radio-group v-model="form.gender">
        <u-radio name="male">男</u-radio>
        <u-radio name="female">女</u-radio>
      </u-radio-group>
    </u-form-item>
    <u-button @click="submit">提交</u-button>
  </u-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        gender: 'male'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          console.log('验证通过', this.form)
        } else {
          console.log('验证失败')
        }
      })
    }
  }
}
</script>

布局系统

Flex 布局

uView 提供了强大的 Flex 布局组件：

<template>
  <u-row gutter="16">
    <u-col span="6">
      <view class="demo">1</view>
    </u-col>
    <u-col span="6">
      <view class="demo">2</view>
    </u-col>
    <u-col span="6">
      <view class="demo">3</view>
    </u-col>
    <u-col span="6">
      <view class="demo">4</view>
    </u-col>
  </u-row>
</template>

<style>
.demo {
  height: 100px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
</style>

Grid 宫格布局

宫格布局常用于功能入口展示：

<template>
  <u-grid :col="4">
    <u-grid-item 
      v-for="(item, index) in list" 
      :key="index"
      @click="clickItem(item)"
    >
      <u-icon :name="item.icon" :size="30"></u-icon>
      <text class="grid-text">{{item.title}}</text>
    </u-grid-item>
  </u-grid>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { icon: 'home', title: '首页' },
        { icon: 'photo', title: '相册' },
        { icon: 'heart', title: '收藏' },
        { icon: 'setting', title: '设置' }
      ]
    }
  },
  methods: {
    clickItem(item) {
      console.log(item.title)
    }
  }
}
</script>

<style>
.grid-text {
  font-size: 14px;
  margin-top: 5px;
  color: #909399;
}
</style>

高级组件应用

下拉刷新与上拉加载

uView 提供了简单易用的列表滚动组件：

<template>
  <u-list
    @scrolltolower="loadMore"
    :pre-load-screen="2"
  >
    <u-cell
      v-for="(item, index) in list"
      :key="index"
      :title="item.title"
    ></u-cell>
    <u-loadmore 
      :status="status" 
      :load-text="loadText"
    />
  </u-list>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      status: 'loadmore',
      loadText: {
        loadmore: '上拉加载更多',
        loading: '正在加载...',
        nomore: '没有更多了'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.status = 'loading'
      // 模拟异步请求
      setTimeout(() => {
        const newList = Array(10).fill().map((_, i) => ({
          title: `项目 ${(this.page - 1) * 10 + i + 1}`
        }))
        this.list = [...this.list, ...newList]
        this.status = this.page >= 3 ? 'nomore' : 'loadmore'
      }, 1000)
    },
    loadMore() {
      if (this.status !== 'nomore') {
        this.page++
        this.getList()
      }
    }
  }
}
</script>

模态弹窗

uView 提供了多种模态弹窗组件：

<template>
  <view>
    <u-button @click="showModal">显示模态框</u-button>
    <u-modal 
      v-model="show" 
      :title="title" 
      :content="content"
      :show-cancel-button="true"
      @confirm="confirm"
      @cancel="cancel"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      title: '提示',
      content: '这是一个模态弹窗'
    }
  },
  methods: {
    showModal() {
      this.show = true
    },
    confirm() {
      console.log('点击了确定')
      this.show = false
    },
    cancel() {
      console.log('点击了取消')
      this.show = false
    }
  }
}
</script>

主题定制

uView 支持通过 SCSS 变量进行主题定制：

创建 theme.scss 文件：

// 主色调
$u-primary: #3c9cff;
$u-primary-dark: #398ade;
$u-primary-disabled: #9acafc;
$u-primary-light: #ecf5ff;

// 错误颜色
$u-error: #fa3534;
$u-error-dark: #dd6161;
$u-error-disabled: #fab6b6;
$u-error-light: #fef0f0;

// 警告颜色
$u-warning: #ff9900;
$u-warning-dark: #f29100;
$u-warning-disabled: #fcbd71;
$u-warning-light: #fdf6ec;

// 成功颜色
$u-success: #19be6b;
$u-success-dark: #18b566;
$u-success-disabled: #71d5a1;
$u-success-light: #dbf1e1;

// 信息颜色
$u-info: #909399;
$u-info-dark: #82848a;
$u-info-disabled: #c8c9cc;
$u-info-light: #f4f4f5;

// 边框颜色
$u-border-color: #e4e7ed;

// 导入uView基础样式
@import 'uview-ui/theme.scss';

在 uni.scss 中引入自定义主题：

@import 'theme.scss';

实用工具函数

uView 提供了丰富的工具函数：

深拷贝

import { deepClone } from 'uview-ui/libs/util'

const obj = { a: 1, b: { c: 2 } }
const clonedObj = deepClone(obj)
console.log(clonedObj) // { a: 1, b: { c: 2 } }

日期格式化

import { timeFormat } from 'uview-ui/libs/util'

const timestamp = 1625097600000
console.log(timeFormat(timestamp, 'yyyy-mm-dd hh:MM:ss')) // 2021-06-30 00:00:00

防抖与节流

import { debounce, throttle } from 'uview-ui/libs/util'

// 防抖
const debounceFn = debounce(() => {
  console.log('防抖函数执行')
}, 500)

// 节流
const throttleFn = throttle(() => {
  console.log('节流函数执行')
}, 500)

// 在事件中使用
<u-button @click="debounceFn">防抖按钮</u-button>
<u-button @click="throttleFn">节流按钮</u-button>

常见问题解决

图标不显示问题

如果图标不显示，检查以下配置：

确保在 App.vue 中引入了图标样式：

<style>
/* 引入uView图标样式 */
@import "uview-ui/index.scss";
</style>

确保图标名称正确：

<u-icon name="home"></u-icon>

样式覆盖问题

如果需要覆盖 uView 默认样式，可以使用深度选择器：

::v-deep .u-button {
  border-radius: 20px !important;
}

多语言支持

uView 支持多语言配置：

// main.js
import uView from 'uview-ui'
import en from 'uview-ui/libs/locale/lang/en'
import zh from 'uview-ui/libs/locale/lang/zh-Hans'

Vue.use(uView, {
  // 配置语言
  locale: 'zh-Hans',
  // 配置语言包
  messages: {
    'en': en,
    'zh-Hans': zh
  }
})

性能优化建议

按需引入组件：

// 按需引入Button组件
import uButton from 'uview-ui/components/u-button/u-button.vue'

export default {
  components: {
    uButton
  }
}

使用虚拟列表处理长列表：

<template>
  <u-list-virtual :list="longList" :item-height="80">
    <template v-slot="{ item }">
      <view class="list-item">{{ item.name }}</view>
    </template>
  </u-list-virtual>
</template>

<script>
export default {
  data() {
    return {
      longList: Array(1000).fill().map((_, i) => ({ id: i, name: `项目 ${i}` }))
    }
  }
}
</script>

<style>
.list-item {
  height: 80px;
  line-height: 80px;
  padding-left: 30px;
  border-bottom: 1px solid #eee;
}
</style>

避免不必要的组件更新：

<template>
  <u-cell-group>
    <u-cell 
      v-for="item in list" 
      :key="item.id"
      :title="item.title"
      :value="item.value"
      :update-title="false"
      :update-value="false"
    />
  </u-cell-group>
</template>

与其他UI库的对比

uView UI 与其他 uni-app UI 库相比具有以下特点：

组件丰富度：uView 提供了超过 80 个组件，覆盖了大部分应用场景
性能优化：uView 针对 uni-app 做了深度优化，性能表现优异
主题定制：支持通过 SCSS 变量轻松定制主题
文档完善：官方文档详细，示例丰富
社区活跃：GitHub 上 star 数高，问题响应及时

实际项目案例

电商应用首页

<template>
  <view>
    <!-- 搜索栏 -->
    <u-search placeholder="搜索商品" v-model="keyword" @search="doSearch"></u-search>
    
    <!-- 轮播图 -->
    <u-swiper :list="bannerList" height="300"></u-swiper>
    
    <!-- 分类入口 -->
    <u-grid :col="5" :border="false">
      <u-grid-item 
        v-for="(item, index) in categoryList" 
        :key="index"
      >
        <u-icon :name="item.icon" :size="30"></u-icon>
        <text class="grid-text">{{item.name}}</text>
      </u-grid-item>
    </u-grid>
    
    <!-- 商品列表 -->
    <u-waterfall v-model="goodsList">
      <template v-slot:left="{ leftList }">
        <view 
          v-for="(item, index) in leftList" 
          :key="index"
          class="goods-item"
        >
          <u-image :src="item.image" width="100%" height="300rpx"></u-image>
          <view class="goods-title">{{item.title}}</view>
          <view class="goods-price">¥{{item.price}}</view>
        </view>
      </template>
      <template v-slot:right="{ rightList }">
        <view 
          v-for="(item, index) in rightList" 
          :key="index"
          class="goods-item"
        >
          <u-image :src="item.image" width="100%" height="300rpx"></u-image>
          <view class="goods-title">{{item.title}}</view>
          <view class="goods-price">¥{{item.price}}</view>
        </view>
      </template>
    </u-waterfall>
    
    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      scrollTop: 0,
      bannerList: [
        { image: '/static/banner1.jpg' },
        { image: '/static/banner2.jpg' },
        { image: '/static/banner3.jpg' }
      ],
      categoryList: [
        { name: '手机', icon: 'phone' },
        { name: '电脑', icon: 'laptop' },
        { name: '家电', icon: 'home' },
        { name: '食品', icon: 'shopping-cart' },
        { name: '更多', icon: 'more-dot-fill' }
      ],
      goodsList: []
    }
  },
  onLoad() {
    this.loadGoods()
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  methods: {
    doSearch() {
      console.log('搜索:', this.keyword)
    },
    loadGoods() {
      // 模拟异步加载商品数据
      setTimeout(() => {
        const newGoods = Array(10).fill().map((_, i) => ({
          id: i,
          title: `商品 ${i + 1}`,
          price: (Math.random() * 1000).toFixed(2),
          image: `/static/goods${i % 5 + 1}.jpg`
        }))
        this.goodsList = [...this.goodsList, ...newGoods]
      }, 1000)
    }
  }
}
</script>

<style>
.goods-item {
  margin: 10rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
}
.goods-title {
  font-size: 28rpx;
  margin: 10rpx 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods-price {
  color: #f56c6c;
  font-size: 32rpx;
  font-weight: bold;
}
</style>

做个网站！

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

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

上一篇：uni-ui 官方组件库介绍

下一篇：ColorUI 的集成与定制