您现在的位置是：网站首页> 小程序设计
uview使用
- 小程序设计
- 2024-08-21
- 1236人已阅读
安装
如果您是使用Hbuilder X开发的用户，您可以在uni-app插件市场通过uni_modules的形式进行安装，此安装方式可以方便您后续在uni_modules对uView进行一键升级。
在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。
注意： 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。
下载地址：
https://ext.dcloud.net.cn/plugin?id=1593
# npm方式安装，插件市场导入无需执行此命令,在项目根目录执行
npm i uview-ui
快速上手
1.main.js引入uView库
// main.js
import uView from 'uview-ui';
Vue.use(uView);
2.App.vue引入基础样式(注意style标签需声明scss属性支持)
/* App.vue */
<style>
@import "uview-ui/index.scss";
</style>
3.uni.scss引入全局scss变量文件
/* uni.scss */
@import "uview-ui/theme.scss";
4.pages.json配置easycom规则(按需引入)
// pages.json
{
"easycom": {
// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
// npm安装方式
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
// 下载安装方式
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
请通过快速上手了解更详细的内容
使用方法
配置easycom规则后，自动按需引入，无需import组件，直接引用即可。
<template>
<u-button text="按钮"></u-button>
</template>
请通过快速上手了解更详细的内容
uView典型布局组件
轮播图
u-swiper
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基础功能</text>
<u-swiper
:list="list1"
@change="change"
@click="click"
></u-swiper>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">带标题</text>
<u-swiper
:list="list2"
keyName="image"
showTitle
:autoplay="false"
circular
></u-swiper>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">带指示器</text>
<u-swiper
:list="list3"
indicator
indicatorMode="line"
circular
></u-swiper>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">加载中</text>
<u-swiper
:list="list3"
loading
></u-swiper>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">嵌入视频</text>
<u-swiper
:list="list4"
keyName="url"
:autoplay="false"
></u-swiper>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义指示器</text>
<u-swiper
:list="list5"
@change="e => current = e.current"
:autoplay="false"
>
<view
slot="indicator"
class="indicator"
>
<view
class="indicator__dot"
v-for="(item, index) in list5"
:key="index"
:class="[index === current && 'indicator__dot--active']"
>
</view>
</view>
</u-swiper>
<u-gap
bgColor="transparent"
height="15"
></u-gap>
<u-swiper
:list="list6"
@change="e => currentNum = e.current"
:autoplay="false"
indicatorStyle="right: 20px"
>
<view
slot="indicator"
class="indicator-num"
>
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
</view>
</u-swiper>
</view>
<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
<view class="u-demo-block">
<text class="u-demo-block__title">卡片式</text>
<u-swiper
:list="list3"
previousMargin="30"
nextMargin="30"
circular
:autoplay="false"
radius="5"
bgColor="#ffffff"
></u-swiper>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
currentNum: 0,
list: [{
// image: 'https://cdn.uviewui.com/uview/resources/video.mp4',
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
list1: [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
],
list2: [{
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
type: 'image',
},
{
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
list3: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
list4: [{
url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
list5: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
list6: [
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
]
}
},
methods: {
change(e) {
// console.log('change', e);
},
click(e) {
console.log('click', e);
}
},
}
</script>
<style>
.indicator {
@include flex(row);
justify-content: center;
&__dot {
height: 6px;
width: 6px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.35);
margin: 0 5px;
transition: background-color 0.3s;
&--active {
background-color: #ffffff;
}
}
}
.indicator-num {
padding: 2px 0;
background-color: rgba(0, 0, 0, 0.35);
border-radius: 100px;
width: 35px;
@include flex;
justify-content: center;
&__text {
color: #FFFFFF;
font-size: 12px;
}
}
</style>
宫格
u-grid
u-grid-item
图片形式的
<!--模块列表-->
<view v-if="m_oneUIClass.uitype=='modeclass'">
<u-grid :border="false" col="4">
<u-grid-item v-for="(listItem,listIndex) in m_oneUIClass.m_uidata" :key="listIndex"
customStyle="padding-top: 10px; padding-bottom: 10px" @click="clickMode(listItem)">
<image class="scroll-list__line__item__image" :src="listItem.picurl" mode="aspectFill"
style="width: 100upx; height: 100upx;"></image>
<text class="grid-text">{{listItem.classname}}</text>
</u-grid-item>
</u-grid>
</view>
.grid-text {
font-size: 14px;
color: #909399;
padding: 10rpx 0 20rpx 0rpx;
/* #ifndef APP-PLUS */
box-sizing: border-box;
/* #endif */
}
.scroll-list {
@include flex(column);
&__goods-item {
margin-right: 20px;
&__image {
width: 60px;
height: 60px;
border-radius: 4px;
}
&__text {
color: #f56c6c;
text-align: center;
font-size: 12px;
margin-top: 5px;
}
}
&__show-more {
background-color: #fff0f0;
border-radius: 3px;
padding: 3px 6px;
@include flex(column);
align-items: center;
&__text {
font-size: 12px;
width: 12px;
color: #f56c6c;
line-height: 16px;
}
}
&__line {
@include flex;
margin-top: 10px;
&__item {
margin-right: 15px;
&__image {
width: 61px;
height: 48px;
}
&__text {
margin-top: 5px;
color: $u-content-color;
font-size: 12px;
text-align: center;
}
&--no-margin-right {
margin-right: 0;
}
}
}
}
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基本案例</text>
<view>
<u-grid
:border="false"
@click="click"
align="center"
>
<u-grid-item
v-for="(baseListItem,baseListIndex) in baseList"
:key="baseListIndex"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="baseListItem.name"
:size="22"
></u-icon>
<text class="grid-text">{{baseListItem.title}}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">显示边框</text>
<view>
<u-grid :border="true">
<u-grid-item
v-for="(listItem,listIndex) in list"
:key="listIndex"
customStyle="padding-top: 10px; padding-bottom: 10px"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="listItem.name"
:size="22"
></u-icon>
<text class="grid-text">{{listItem.title}}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">绑定点击事件&自定义列数</text>
<view>
<u-grid
:border="false"
col="4"
>
<u-grid-item
v-for="(listItem,listIndex) in list"
:key="listIndex"
customStyle="padding-top: 10px; padding-bottom: 10px"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="listItem.name"
:size="22"
></u-icon>
<text class="grid-text">{{listItem.title}}</text>
</u-grid-item>
</u-grid>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">可滑动</text>
<view>
<swiper
:indicator-dots="true"
class="swiper"
>
<swiper-item>
<u-grid :border="true">
<u-grid-item
v-for="(item, index) in swiperList"
:index="index"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
<swiper-item>
<u-grid :border="true">
<u-grid-item
v-for="(item, index) in swiperList"
:index="index + 9"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
<swiper-item>
<u-grid :border="true">
<u-grid-item
v-for="(item, index) in swiperList"
:index="index + 18"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ "宫格" + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
</swiper>
</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
baseList: [{
name: 'photo',
title: '图片'
},
{
name: 'lock',
title: '锁头'
},
// {
// name: 'star',
// title: '星星'
// },
],
list: [{
name: 'photo',
title: '图片'
},
{
name: 'lock',
title: '锁头'
},
{
name: 'star',
title: '星星'
},
{
name: 'hourglass',
title: '沙漏'
},
{
name: 'home',
title: '首页'
},
{
name: 'volume',
title: '音量'
},
],
swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
}
},
methods: {
click(name) {
this.$refs.uToast.success(`点击了第${name}个`)
}
}
}
</script>
<style>
.swiper {
height: 220px;
}
.grid-text {
font-size: 14px;
color: #909399;
padding: 10rpx 0 20rpx 0rpx;
/* #ifndef APP-PLUS */
box-siz
ing: border-box;
/* #endif */
}
</style>
行列
u-row
u-col
例子：
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基础使用</text>
<view class="u-demo-block__content">
<u-row customStyle="margin-bottom: 10px">
<u-col span="6">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="6">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
<u-row customStyle="margin-bottom: 10px">
<u-col span="4">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple-dark"></view>
</u-col>
</u-row>
<u-row justify="space-between">
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
</u-row>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">分栏间隔</text>
<view class="u-demo-block__content">
<u-row justify="space-between" gutter="10">
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
</u-row>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">混合布局</text>
<view class="u-demo-block__content">
<u-row justify="space-between" gutter="10">
<u-col span="2">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="6">
<view class="demo-layout bg-purple-dark"></view>
</u-col>
</u-row>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">分栏偏移</text>
<view class="u-demo-block__content">
<u-row
justify="space-between"
customStyle="margin-bottom: 10px"
>
<u-col span="3" offset="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3" offset="3">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
<u-row>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3" offset="3">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">对齐方式</text>
<view class="u-demo-block__content">
<u-row
justify="space-between"
customStyle="margin-bottom: 10px"
>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
<u-row>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style>
.wrap {
padding: 12px;
}
.demo-layout {
height: 25px;
border-radius: 4px;
}
.bg-purple {
background: #ced7e1;
}
.bg-purple-light {
background: #e5e9f2;
}
.bg-purple-dark {
background: #99a9bf;
}
</style>
横向滚动列表
u-scroll-list
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title" style="margin-bottom: 15px;">基础使用</text>
<u-scroll-list
indicatorColor="#fff0f0"
indicatorActiveColor="#f56c6c"
@right="right"
@left="left"
>
<view
class="scroll-list"
style="flex-direction: row;"
>
<view
class="scroll-list__goods-item"
v-for="(item, index) in goodsArr"
:key="index"
:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
>
<image
class="scroll-list__goods-item__image"
:src="goodsBaseUrl + item.thumbnail"
mode=""
></image>
<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
</view>
<view
class="scroll-list__show-more"
@tap="showMore"
>
<text class="scroll-list__show-more__text">查看更多</text>
<u-icon
name="arrow-leftward"
color="#f56c6c"
size="12"
></u-icon>
</view>
</view>
</u-scroll-list>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">多菜单扩展</text>
<u-scroll-list>
<view class="scroll-list">
<view
class="scroll-list__line"
v-for="(item, index) in menuArr"
:key="index"
>
<view
class="scroll-list__line__item"
v-for="(item1, index1) in item"
:key="index1"
:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']"
>
<image
class="scroll-list__line__item__image"
:src="menuBaseUrl + item1.icon"
mode=""
></image>
<text class="scroll-list__line__item__text">{{ item1.name }}</text>
</view>
</view>
</view>
</u-scroll-list>
</view>
</view>
</template>
<script>
export default {
data() {
return {
goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
goodsArr: [{
price: '230.5',
thumbnail: '1.jpg'
},
{
price: '74.1',
thumbnail: '2.jpg'
},
{
price: '8457',
thumbnail: '6.jpg'
},
{
price: '1442',
thumbnail: '5.jpg'
},
{
price: '541',
thumbnail: '2.jpg'
},
{
price: '234',
thumbnail: '3.jpg'
},
{
price: '562',
thumbnail: '4.jpg'
},
{
price: '251.5',
thumbnail: '1.jpg'
}
],
menuArr: [
[{
name: '天猫新品',
icon: '11.png'
},
{
name: '今日爆款',
icon: '9.png'
}, {
name: '天猫国际',
icon: '17.png'
}, {
name: '饿了么',
icon: '6.png'
}, {
name: '天猫超市',
icon: '11.png'
}, {
name: '分类',
icon: '2.png'
}, {
name: '天猫美食',
icon: '3.png'
}, {
name: '阿里健康',
icon: '12.png'
}, {
name: '口碑生活',
icon: '7.png'
}
],
[{
name: '充值中心',
icon: '8.png'
},
{
name: '机票酒店',
icon: '10.png'
}, {
name: '金币庄园',
icon: '18.png'
}, {
name: '阿里拍卖',
icon: '15.png'
}, {
name: '淘宝吃货',
icon: '16.png'
}, {
name: '闲鱼',
icon: '4.png'
}, {
name: '会员中心',
icon: '6.png'
}, {
name: '造点新货',
icon: '13.png'
}, {
name: '土货鲜食',
icon: '14.png'
}
]
]
}
},
methods: {
showMore() {
uni.$u.toast('查看更多')
},
left() {
console.log('left');
},
right() {
console.log('right');
}
},
}
</script>
<style>
.scroll-list {
@include flex(column);
&__goods-item {
margin-right: 20px;
&__image {
width: 60px;
height: 60px;
border-radius: 4px;
}
&__text {
color: #f56c6c;
text-align: center;
font-size: 12px;
margin-top: 5px;
}
}
&__show-more {
background-color: #fff0f0;
border-radius: 3px;
padding: 3px 6px;
@include flex(column);
align-items: center;
&__text {
font-size: 12px;
width: 12px;
color: #f56c6c;
line-height: 16px;
}
}
&__line {
@include flex;
margin-top: 10px;
&__item {
margin-right: 15px;
&__image {
width: 61px;
height: 48px;
}
&__text {
margin-top: 5px;
color: $u-content-color;
font-size: 12px;
text-align: center;
}
&--no-margin-right {
margin-right: 0;
}
}
}
}
</style>
单元格
u-cell-group
u-cell
<template>
<view class="cell-page">
<view class="u-page__item">
<text class="u-page__item__title">基础功能</text>
<u-cell-group>
<u-cell
title="uView UI"
value="内容"
:isLink="true"
></u-cell>
<u-cell
title="利剑出鞘,一统江湖"
value="内容"
label="挣脱束缚,向往自由"
></u-cell>
</u-cell-group>
</view>
<view class="u-page__item">
<text class="u-page__item__title">自定义图标/图片</text>
<u-cell-group>
<u-cell
title="单元格"
icon="lock-fill"
></u-cell>
<u-cell
title="单元格"
icon="https://cdn.uviewui.com/uview/example/tag.png"
></u-cell>
</u-cell-group>
</view>
<view class="u-page__item">
<text class="u-page__item__title">自定义大小</text>
<u-cell-group>
<u-cell
size="large"
title="单元格"
value="内容"
isLink
></u-cell>
<u-cell
size="large"
title="单元格"
value="内容"
label="描述信息"
></u-cell>
</u-cell-group>
</view>
<view class="u-page__item">
<text class="u-page__item__title">显示右箭头</text>
<u-cell-group>
<u-cell
title="单元格"
value="组件"
isLink
></u-cell>
<u-cell
title="单元格"
value="工具"
arrow-direction="up"
isLink
></u-cell>
<u-cell
title="单元格"
value="模板"
arrow-direction="down"
isLink
></u-cell>
</u-cell-group>
</view>
<view class="u-page__item">
<text class="u-page__item__title">跳转页面</text>
<u-cell-group>
<u-cell
title="打开标签页"
isLink
url="/pages/componentsB/tag/tag"
></u-cell>
<u-cell
title="打开徽标页"
isLink
url="/pages/componentsB/badge/badge"
></u-cell>
</u-cell-group>
</view>
<view class="u-page__item">
<text class="u-page__item__title">右侧内容垂直居中</text>
<u-cell-group>
<u-cell
title="单元格"
value="内容"
label="描述信息"
center
></u-cell>
</u-cell-group>
</view>
<view class="u-page__item">
<text class="u-page__item__title">自定义插槽</text>
<u-cell-group>
<u-cell value="内容">
<view
slot="title"
class="u-slot-title"
>
<text class="u-cell-text">单元格</text>
<u-tag
text="标签"
plain
size="mini"
type="warning"
>
</u-tag>
</view>
</u-cell>
<u-cell
title="单元格"
isLink
>
<text
slot="value"
class="u-slot-value"
>99</text>
</u-cell>
</u-cell-group>
</view>
<u-gap height="30"></u-gap>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
click() {
console.log('Cell is clicked.');
}
}
}
</script>
<style>
.cell-page {
padding-bottom: 20px;
}
.cell-box {
&__title {
font-size: 14px;
color: rgb(143, 156, 162);
margin: 20px 0px 0px 15px;
}
&__block {
// background-color: #fff;
margin-top: 20px;
}
}
.u-page {
padding: 0;
&__item {
&__title {
color: $u-tips-color;
background-color: $u-bg-color;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
}
}
.u-slot-title {
@include flex;
flex-direction: row;
align-items: center;
}
.u-cell-text {
font-size: 15px;
line-height: 22px;
color: #303133;
margin-right: 5px;
}
.u-slot-value {
line-height: 17px;
text-align: center;
font-size: 10px;
padding: 0 5px;
height: 17px;
color: #FFFFFF;
border-radius: 100px;
background-color: #f56c6c;
}
</style>
列表
u-list
u-list-item
<template>
<view class="u-page">
<u-list
@scrolltolower="scrolltolower"
>
<u-list-item
v-for="(item, index) in indexList"
:key="index"
>
<u-cell
:title="`列表长度-${index + 1}`"
>
<u-avatar
slot="icon"
shape="square"
size="35"
:src="item.url"
customStyle="margin: -3px 5px -3px 0"
></u-avatar>
</u-cell>
</u-list-item>
</u-list>
</view>
</template>
<script>
export default {
data() {
return {
indexList: [],
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg',
'https://cdn.uviewui.com/uview/album/3.jpg',
'https://cdn.uviewui.com/uview/album/4.jpg',
'https://cdn.uviewui.com/uview/album/5.jpg',
'https://cdn.uviewui.com/uview/album/6.jpg',
'https://cdn.uviewui.com/uview/album/7.jpg',
'https://cdn.uviewui.com/uview/album/8.jpg',
'https://cdn.uviewui.com/uview/album/9.jpg',
'https://cdn.uviewui.com/uview/album/10.jpg',
]
}
},
onLoad() {
this.loadmore()
},
methods: {
scrolltolower() {
this.loadmore()
},
loadmore() {
for (let i = 0; i < 30; i++) {
this.indexList.push({
url: this.urls[uni.$u.random(0, this.urls.length - 1)]
})
}
}
},
}
</script>
<style>
.u-page {
padding: 0;
}
</style>
折叠面板
u-collapse
u-collapse-item
<template>
<view class="u-page">
<view class="u-page__item">
<text class="u-page__item__title">基础功能</text>
<u-collapse
@change="change"
@close="close"
@open="open"
>
<u-collapse-item
title="文档指南"
name="Docs guide"
>
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
</u-collapse-item>
<u-collapse-item
title="组件全面"
name="Variety components"
>
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
</u-collapse-item>
<u-collapse-item
title="众多利器"
name="Numerous tools"
>
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
</u-collapse-item>
</u-collapse>
</view>
<view class="u-page__item">
<text class="u-page__item__title">展开和禁用</text>
<u-collapse
:value="['2']"
>
<u-collapse-item
title="文档指南"
>
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
</u-collapse-item>
<u-collapse-item
disabled
title="组件全面"
>
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
</u-collapse-item>
<u-collapse-item
name="2"
title="众多利器"
>
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
</u-collapse-item>
</u-collapse>
</view>
<view class="u-page__item">
<text class="u-page__item__title">手风琴模式</text>
<u-collapse
accordion
>
<u-collapse-item
title="文档指南"
>
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
</u-collapse-item>
<u-collapse-item
title="组件全面"
>
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
</u-collapse-item>
<u-collapse-item
title="众多利器"
>
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
</u-collapse-item>
</u-collapse>
</view>
<view class="u-page__item">
<text class="u-page__item__title">移除下划线</text>
<u-collapse
accordion
:border="false"
>
<u-collapse-item
title="文档指南"
>
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
</u-collapse-item>
<u-collapse-item
title="组件全面"
>
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
</u-collapse-item>
<u-collapse-item
title="众多利器"
>
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
</u-collapse-item>
</u-collapse>
</view>
<!-- 微信小程序不支持，因为微信中不支持 <slot name="title" slot="title" />的写法 -->
<!-- #ifndef MP-WEIXIN -->
<view class="u-page__item">
<text class="u-page__item__title">自定义标题和内容</text>
<u-collapse
accordion
>
<u-collapse-item
>
<text slot="title" class="u-page__item__title__slot-title">文档指南</text>
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
</u-collapse-item>
<!-- <u-collapse-item
:isLink="false"
>
<text slot="title" class="u-page__item__title__slot-title">文档指南</text>
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
</u-collapse-item> -->
<u-collapse-item
title="组件全面"
>
<u-icon name="tags-fill" size="20" slot="icon"></u-icon>
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
</u-collapse-item>
<u-collapse-item
title="众多利器"
>
<text slot="value" class="u-page__item__title__slot-title">自定义内容</text>
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
</u-collapse-item>
</u-collapse>
</view>
<!-- #endif -->
<u-gap height="50"></u-gap>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
open(e) {
// console.log('open', e)
},
close(e) {
// console.log('close', e)
},
change(e) {
// console.log('change', e)
}
}
}
</script>
<style>
.u-page {
padding: 0;
&__item {
&__title {
color: $u-tips-color;
background-color: $u-bg-color;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
}
}
.u-collapse-content {
color: $u-tips-color;
font-size: 14px;
}
</style>
底部导航栏
u-tabbar
<template>
<view class="u-page">
<view class="u-page__item">
<text class="u-page__item__title">基础功能</text>
<u-tabbar
:value="value1"
@change="change1"
:fixed="false"
:placeholder="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item
text="首页"
icon="home"
@click="click1"
></u-tabbar-item>
<u-tabbar-item
text="放映厅"
icon="photo"
@click="click1"
></u-tabbar-item>
<u-tabbar-item
text="直播"
icon="play-right"
@click="click1"
></u-tabbar-item>
<u-tabbar-item
text="我的"
icon="account"
@click="click1"
></u-tabbar-item>
</u-tabbar>
</view>
<view class="u-page__item">
<text class="u-page__item__title">显示徽标</text>
<u-tabbar
:value="value2"
:placeholder="false"
@change="name => value2 = name"
:fixed="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item
text="首页"
icon="home"
dot
></u-tabbar-item>
<u-tabbar-item
text="放映厅"
icon="photo"
badge="3"
></u-tabbar-item>
<u-tabbar-item
text="直播"
icon="play-right"
></u-tabbar-item>
<u-tabbar-item
text="我的"
icon="account"
></u-tabbar-item>
</u-tabbar>
</view>
<view class="u-page__item">
<text class="u-page__item__title">匹配标签的名称</text>
<u-tabbar
:placeholder="false"
:value="value3"
@change="name => value3 = name"
:fixed="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item
text="首页"
icon="home"
name="home"
></u-tabbar-item>
<u-tabbar-item
text="放映厅"
icon="photo"
name="photo"
></u-tabbar-item>
<u-tabbar-item
text="直播"
icon="play-right"
name="play-right"
></u-tabbar-item>
<u-tabbar-item
text="我的"
name="account"
icon="account"
></u-tabbar-item>
</u-tabbar>
</view>
<view class="u-page__item">
<text class="u-page__item__title">自定义图标/颜色</text>
<u-tabbar
:value="value4"
@change="name => value4 = name"
:fixed="false"
:placeholder="false"
activeColor="#d81e06"
:safeAreaInsetBottom="false"
>
<u-tabbar-item text="首页">
<image
class="u-page__item__slot-icon"
slot="active-icon"
src="https://cdn.uviewui.com/uview/common/bell-selected.png"
></image>
<image
class="u-page__item__slot-icon"
slot="inactive-icon"
src="https://cdn.uviewui.com/uview/common/bell.png"
></image>
</u-tabbar-item>
<u-tabbar-item
text="放映厅"
icon="photo"
></u-tabbar-item>
<u-tabbar-item
text="直播"
icon="play-right"
></u-tabbar-item>
<u-tabbar-item
text="我的"
icon="account"
></u-tabbar-item>
</u-tabbar>
</view>
<view class="u-page__item">
<text class="u-page__item__title">拦截切换事件(点击第二个标签)</text>
<u-tabbar
:value="value5"
:fixed="false"
@change="change5"
:safeAreaInsetBottom="false"
:placeholder="false"
>
<u-tabbar-item
text="首页"
icon="home"
>
</u-tabbar-item>
<u-tabbar-item
text="放映厅"
icon="photo"
></u-tabbar-item>
<u-tabbar-item
text="直播"
icon="play-right"
></u-tabbar-item>
<u-tabbar-item
text="我的"
icon="account"
></u-tabbar-item>
</u-tabbar>
</view>
<view class="u-page__item">
<text class="u-page__item__title">去除上边框</text>
<u-tabbar
:value="value7"
:placeholder="false"
:border="false"
@change="name => value7 = name"
:fixed="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item
text="首页"
icon="home"
></u-tabbar-item>
<u-tabbar-item
text="放映厅"
icon="photo"
></u-tabbar-item>
<u-tabbar-item
text="直播"
icon="play-right"
></u-tabbar-item>
<u-tabbar-item
text="我的"
icon="account"
></u-tabbar-item>
</u-tabbar>
</view>
<view class="u-page__item">
<text class="u-page__item__title">固定在底部(固定在屏幕最下方)</text>
<u-gap height="150"></u-gap>
<u-tabbar
:value="value6"
@change="name => value6 = name"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
>
<u-tabbar-item
text="首页"
icon="home"
>
</u-tabbar-item>
<u-tabbar-item
text="放映厅"
icon="photo"
></u-tabbar-item>
<u-tabbar-item
text="直播"
icon="play-right"
></u-tabbar-item>
<u-tabbar-item
text="我的"
icon="account"
></u-tabbar-item>
</u-tabbar>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 1,
value3: 'play-right',
value4: 0,
value5: 0,
value6: 0,
value7: 3
}
},
onLoad() {
},
methods: {
change5(name) {
if (name === 1) return uni.$u.toast('请您先登录')
else this.value5 = name
},
change1(e) {
this.value1 = e
console.log('change1', e);
},
click1(e) {
console.log('click1', e);
}
},
}
</script>
<style>
.u-page {
padding: 0;
&__item {
&__title {
color: $u-tips-color;
background-color: $u-bg-color;
padding: 15px;
font-size: 15px;
&__slot-title {
color: $u-primary;
font-size: 14px;
}
}
&__slot-icon {
width: 17px;
height: 17px;
}
}
}
</style>
Model模态窗口
u-modal
<template>
<view class="u-page">
<u-navbar
title="模态框"
@leftClick="navigateBack"
safeAreaInsetTop
fixed
placeholder
></u-navbar>
<u-gap
height="20"
bgColor="#fff"
></u-gap>
<u-cell-group>
<u-cell
@click="showModal(index)"
:title="item.title"
v-for="(item, index) in list"
:key="index"
isLink
>
<image
slot="icon"
class="u-cell-icon"
:src="item.iconUrl"
mode="widthFix"
></image>
</u-cell>
</u-cell-group>
<u-modal
:content="content"
title="标题"
:show="show1"
@confirm="() => show1 = false"
></u-modal>
<u-modal
:content="content"
:show="show2"
@confirm="() => show2 = false"
></u-modal>
<u-modal
:content="content"
:show="show3"
showCancelButton
closeOnClickOverlay
@confirm="confirm"
@cancel="cancel"
@close="close"
></u-modal>
<u-modal
:content="content"
:show="show4"
showCancelButton
asyncClose
@confirm="confirm4"
@cancel="() => show4 = false"
></u-modal>
<u-modal
:content="content"
:show="show5"
showCancelButton
buttonReverse
@confirm="() => show5 = false"
@cancel="() => show5 = false"
></u-modal>
<u-modal
:content="content"
title="标题"
:show="show6"
closeOnClickOverlay
@confirm="() => show6 = false"
@close="() => show6 = false"
></u-modal>
<u-modal
title="利剑出鞘,一统江湖"
:show="show7"
closeOnClickOverlay
@confirm="() => show7 = false"
>
<image
style="width: 80px;height: 80px;"
src="/static/uview/common/logo.png"
></image>
</u-modal>
<u-modal
title="标题"
:show="show8"
:content="content"
closeOnClickOverlay
showCancelButton
>
<u-button
slot="confirmButton"
text="确定"
type="success"
shape="circle"
@click="show8 = false"
></u-button>
</u-modal>
<u-modal
:content="content"
title="标题"
:show="show9"
:zoom="false"
@confirm="() => show9 = false"
></u-modal>
</view>
</template>
<script>
export default {
data() {
return {
content: '模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作',
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
show6: false,
show7: false,
show8: false,
show9: false,
list: [{
title: '基础使用',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/4.png'
},
{
title: '无标题',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/5.png'
},
{
title: '带取消按钮',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/2.png'
},
{
title: '异步关闭',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/6.png'
},
{
title: '对调取消和确认按钮',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/3.png'
},
{
title: '允许点击遮罩关闭',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/7.png'
},
{
title: '传入slot',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/1.png'
},
{
title: '自定义按钮',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/8.png'
},
{
title: '淡入淡出动画',
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/9.png'
}
]
}
},
methods: {
showModal(index) {
this[`show${index + 1}`] = true
},
navigateBack() {
uni.navigateBack()
},
confirm4() {
setTimeout(() => {
this.show4 = false
}, 2000)
},
confirm() {
this.show3 = false
console.log('confirm');
},
cancel() {
this.show3 = false
console.log('cancel');
},
close() {
this.show3 = false
console.log('close');
}
}
}
</script>
<style>
.u-page {
padding: 0;
}
</style>
Popup 弹出程层
u-popup
<template>
<view>
<u-navbar
title="弹窗"
@leftClick="navigateBack"
safeAreaInsetTop
fixed
placeholder
></u-navbar>
<u-gap
height="20"
bgColor="#fff"
></u-gap>
<u-cell-group>
<u-cell
:titleStyle="{fontWeight: 500}"
@click="openPopup(item.popupData)"
:title="item.title"
v-for="(item, index) in list"
:key="index"
isLink
>
<image
slot="icon"
class="u-cell-icon"
:src="item.iconUrl"
mode="widthFix"
></image>
</u-cell>
</u-cell-group>
<u-popup
:safeAreaInsetBottom="true"
:safeAreaInsetTop="true"
:mode="popupData.mode"
:show="show"
:round="popupData.round"
:overlay="popupData.overlay"
:borderRadius="popupData.borderRadius"
:closeable="popupData.closeable"
:closeOnClickOverlay="popupData.closeOnClickOverlay"
@close="close"
@open="open"
>
<view
class="u-popup-slot"
:style="{
width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px',
marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
}"
>
<u-button
type="success"
text="点我关闭"
customStyle="width: 200rpx"
@click="show = !show"
></u-button>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
popupData: {
overlay: true,
mode: 'bottom',
borderRadius: '',
closeable: true,
closeOnClickOverlay: true
},
list: [{
popupData: {
overlay: true,
mode: 'top',
closeOnClickOverlay: true
},
title: '顶部弹出',
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeTop.png'
},
{
popupData: {
overlay: true,
mode: 'right',
closeOnClickOverlay: true
},
title: '右侧弹出',
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png'
},
{
popupData: {
overlay: true,
mode: 'bottom',
closeOnClickOverlay: true
},
title: '底部弹出',
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeBottom.png'
},
{
popupData: {
overlay: true,
mode: 'left',
closeOnClickOverlay: true
},
title: '左侧弹出',
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeLeft.png'
},
{
popupData: {
overlay: true,
mode: 'center',
round: 10,
closeOnClickOverlay: true
},
title: '居中弹出',
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeCenter.png'
},
{
popupData: {
overlay: true,
mode: 'bottom',
round: 10,
closeOnClickOverlay: true
},
title: '显示圆角',
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png'
},
{
popupData: {
overlay: true,
mode: 'bottom',
closeable: false,
closeOnClickOverlay: false
},
title: '禁止点击遮罩关闭',
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/noClose.png'
},
{
popupData: {
overlay: true,
mode: 'bottom',
closeable: true,
closeOnClickOverlay: true
},
title: '显示关闭按钮',
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png'
}
]
}
},
methods: {
openPopup(popupData) {
this.popupData = popupData
uni.$u.sleep().then(() => {
this.show = !this.show
})
},
navigateBack() {
uni.navigateBack()
},
open() {
// console.log('open');
},
close() {
this.show = false
// console.log('close');
}
}
}
</script>
<style>
.u-popup-slot {
width: 200px;
height: 150px;
@include flex;
justify-content: center;
align-items: center;
}
</style>
上一篇：uniapp总结