uview组件使用笔记

图标样式

修改图标的样式

• 通过color参数修改图标的颜色
• 通过size参数修改图标的大小，单位为rpx

效果图

<u-icon name="photo" color="#2979ff" size="28"></u-icon>

图片图标 1.3.0

这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为png格式的正方形图标。

上面说到，给组件的name参数传入一个图片的名称即可显示字体图标，这些名称中不能带有/斜杠符号，否则会被认为是传入了图片图标，同时，size参数 也被设置为这个图片图标的宽度，由于是图片，诸如颜色color等参数都会失效。

<u-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>

 效果图

<u-image width="100%" height="300rpx" :src="src"></u-image>

设置按钮为半圆形

shape默认值为square(按钮为圆角矩形)，设置为circle，则按钮两边为半圆形

<u-button shape="square">乌啼</u-button>

设置尺寸

button组件的size（可选值为default(默认)，mini(小尺寸)和medium(中等尺寸)）

<u-button size="default">江湖</u-button>
<u-button size="medium">夜雨</u-button>
<u-button size="mini">十年灯</u-button>

设置点击按钮的水波纹效果

该效果通过给按钮绝对定位形式覆盖一个view，点击时改变view的scale，opacity样式属性，形成扩散再消失的水波纹效果。

<u-button :ripple="true">十年</u-button>

<!-- 通过rippleBgColor设置水波纹的背景颜色 -->
<u-button :ripple="true" ripple-bg-color="#909399">之约</u-button>

Tag 标签

该组件一般用于标记和选择，有如下特点：

• mode参数可以设置3种模式，dark(深色背景)、light(浅色背景)、plain(白色背景)
• shape参数可以设置多种形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边半圆），circleRight（右边半圆）
• type参数可以设置5种主题，primary，success，warning，error，info

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 通过type参数设置主题类型，默认为primary
• text设置标签内容

<u-tag text="雪月夜" type="success" />

设置标签的类型

• 通过设置mode参数，可以设置标签的类型，dark(深色背景)、light(浅色背景)、plain(白色背景)

<u-tag text="一丘之貉" mode="dark" />
<u-tag text="沆瀣一气" mode="light" />
<u-tag text="狼狈为奸" mode="plain" />

设置标签的形状

通过shape参数，可以设置标签的形状，默认是square（方形，带圆角），可选：circle（两边半圆形）, circleLeft（左边半圆），circleRight（右边半圆）

<u-tag text="主谓宾" shape="circle" />
<u-tag text="定状补" shape="circleLeft" />

设置标签是否可以关闭

效果图

设置closeable参数为true，会在标签上自动添加一个关闭图标
设置可关闭后，点击关闭按钮，会发出close事件，回调中手动设置show参数为false，可以隐藏Tag

<template>
	<u-tag text="要清楚" closeable :show="show" @close="tagClick" />
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			tagClick(index) {
				this.show = false;
			}
		}
	}
</script>

Input 输入框 1.3.0

效果图

此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。

注意： 当您仅是需要一个输入框的话，可以考虑使用u-field组件，而如果是一个表单组，比如有多个输入框一起，且需要验证功能的时候， 应该在u-form中嵌套u-form-item，再嵌套u-input去实现。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 通过v-model绑定输入框的值
• 通过type设置输入框的类型
• 通过border配置是否显示输入框的边框

<template>
	<u-input v-model="value" :type="type" :border="border" />
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true
			}
		}
	}
</script>

日历模式

• mode为date只能选择单个日期
• mode为range可以选择日期范围

单个日期模式

选择日期后，需要点击底部的确定按钮才能触发回调事件，回调参数为一个对象，有如下属性：

{
	day: 4, // 选择了哪一天
	days: 30, // 这个月份有多少天
	isToday: true, // 选择的日期是否今天
	month: 6, // 选择的月份
	result: "2020-06-04", // 选择的日期整体值
	week: "星期四", // 选择日期所属的星期数
	year: 2020 , // 选择的年份
}

示例代码：

<template>
	<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

效果图

自定义内容

效果图

组件有一个默认插槽，名为tooltip，传入的内容将会显示在键盘的顶部位置，如使用，需要为传入的内容自定义样式。

<template>
	<u-calendar 
	month-arrow-color="#FF55FF"
	year-arrow-color="#FF55FF"
	color="#FF55FF"
	active-bg-color="#FF55FF"
	active-color="#FF22FF"
	range-bg-color="#FF22FF"
	range-color="#FF22FF"
	 v-model="show" :mode="mode" @change="change">
		<view slot="tooltip">
			<view class="title">
				请选择住店/离店时间
			</view>
		</view>
	</u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-type-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

API

Props

参数	说明	类型	默认值	可选值
mode	选择日期的模式，date-为单个日期，range-为选择日期范围	String	date	range
v-model	布尔值变量，用于控制日历的弹出与收起	Boolean	false	true
safe-area-inset-bottom	是否开启底部安全区适配	Boolean	false	true
change-year	是否显示顶部的切换年份方向的按钮	Boolean	true	false
change-month	是否显示顶部的切换月份方向的按钮	Boolean	true	false
max-year	可切换的最大年份	Number | String	2050	-
min-year	可切换的最小年份	Number | String	1950	-
min-date	最小可选日期	Number | String	1950-01-01	-
max-date	最大可选日期	Number | String	当前日期	-
border-radius	弹窗顶部左右两边的圆角值，单位rpx	Number | String	20	-
mask-close-able	是否允许通过点击遮罩关闭日历	Boolean	true	false
month-arrow-color	月份切换按钮箭头颜色	String	#606266	-
year-arrow-color	年份切换按钮箭头颜色	String	#909399	-
color	日期字体的默认颜色	String	#303133	-
active-bg-color	起始/结束日期按钮的背景色	String	#2979ff	-
z-index	弹出时的z-index值	String | Number	10075	-
active-color	起始/结束日期按钮的字体颜色	String	#ffffff	-
range-bg-color	起始/结束日期之间的区域的背景颜色	String	rgba(41,121,255,0.13)	-
range-color	选择范围内字体颜色	String	#2979ff	-
start-text	起始日期底部的提示文字	String	开始	-
end-text	结束日期底部的提示文字	String	结束	-
btn-type	底部确定按钮的主题	String	primary	default / success / info/ warning / error
toolTip	顶部提示文字，如设置名为tooltip的slot，此参数将失效	String	选择日期	-
closeable	是否显示右上角的关闭图标	Boolean	true	false

 select列选择器

效果图

单列模式

此方式使用较为简单，需要传入一个一维数组，数组的元素为对象，要求必须有value和label属性，这两个值也将会在回调中被返回。

<template>
	<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				list: [
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
			}
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

Keyboard 键盘

效果图

此为uView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过mode参数定义键盘的类型，v-model绑定一个值为布尔值的变量控制键盘的弹出与收起：

• mode = number (默认值)为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
• mode = car 为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
• mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

<template>
	<view>
		<u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>

Rate 评分

该组件一般用于满意度调查，星型评分的场景。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 通过count参数设置总共有多少颗星星可选择
• 通过v-model双向绑定初始化时默认选中的星星数量 1.4.5新增
• 通过current设置初始化时默认选中的星星数量(1.4.5后建议使用v-model的方式，此参数为了向前兼容依然有效，但优先级低于v-model)

<template>
	<u-rate :count="count" v-model="value"></u-rate>
</template>

<script>
	export default {
		data() {
			return {
				count: 4,
				value: 2
			}
		}
	}
</script>

自定义样式

• 通过active-color设置选中的星星的颜色
• 通过inactive-color设置未选中时星星的颜色
• 通过gutter设置星星的间距，左右内边距各占gutter的一半

<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

自定义图标

• 通过active-icon设置激活的图标
• 通过inactive-icon设置未激活的图标
• 通过custom-prefix设置自定义图标，详见：扩展自定义图标库

• (opens new window)

下方示例为使用心形图标替代默认的星星图标：

<u-rate active-icon="heart-fill" inactive-icon="heart"></u-rate>

评分分级分层 1.7.2

• 通过colors设置不同颜色区分评分层级
• 通过icons设置不同类型图标区分评分层级

<template>
  <view>
    <u-rate v-model="value" :colors="colors" :icons="icons" inactive-icon="thumb-up"></u-rate>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: 2,
        colors: ['#ffc454', '#ffb409', '#ff9500'],
        icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill']
      }
    }
  }
</script>

最少选中的数量

<u-rate :min-count="5"></u-rate>

禁用状态

禁用下，无法点击或者滑动选择，但是可以通过current设置默认选中的数量，禁用状态下用来展示分数，允许出现半星

<u-rate :current="3.7" :disabled="true"></u-rate>

API

Props

参数	说明	类型	默认值	可选值
v-model 1.4.5	双向绑定选择星星的数量	String | Number	0	-
count	最多可选的星星数量	String | Number	5	-
current	默认选中的星星数量，1.4.5起建议使用v-model方式	String | Number	0	-
disabled	是否禁止用户操作	Boolean	false	true
size	星星的大小，单位rpx	String | Number	32	-
inactive-color	未选中星星的颜色	String	#b2b2b2	-
active-color	选中的星星颜色	String	#FA3534	-
gutter	星星之间的距离	String | Number	10	-
min-count	最少选中星星的个数	String | Number	0	-
active-icon	选中时的图标名，只能为uView的内置图标	String	star-fill	-
inactive-icon	未选中时的图标名，只能为uView的内置图标	String	star	-
custom-prefix 1.7.2	自定义字体图标库时，需要写上此值，详见：扩展自定义图标库

(opens new window)	String	uicon	-
colors 1.7.2	颜色分级显示，可以用不同颜色区分评分层级	Array	-	-
icons 1.7.2	图标分级显示，可以用不同类型的icon区分评分层级	Array	-	-

实际应用效果图：

<template>
    <view>
        <u-keyboard ref="uKeyboard" mode="number" v-model="show"></u-keyboard>
        <u-button @click="show = true">打开</u-button>
        
        <u-rate @change="change" active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                num:''
            }
        },
        methods:{
            change(e){
                console.log(e)
            }
        }
    }
</script>

Events

事件名	说明	回调参数
change	选中的星星发生变化时触发	value：当前选中的星星的数量，如果使用v-model双向绑定方式，无需监听此事件

Search 搜索

<template>
    <view>
        <u-keyboard ref="uKeyboard" mode="number" v-model="show"></u-keyboard>
        <u-button @click="show = true">打开</u-button>
        
        <u-rate @change="change_rate" active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>
        
        <u-search @change="change_search"
        :show-action="true" action-text="搜索"
        :animation="true"
        bg-color="#ffff7f"
        color
        ></u-search>

        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                num:''
            }
        },
        methods:{
            change_rate(e){
                console.log(e)
            },
            change_search(e){
                console.log(e)
            },
        }
    }
</script>

<template>
    <view>
        <u-keyboard ref="uKeyboard" mode="number" v-model="show"></u-keyboard>
        <u-button @click="show = true">打开</u-button>
        
        <u-rate @change="change_rate" active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>
        
        <u-search @change="change_search"
        :show-action="true" action-text="搜索"
        :animation="true"
        bg-color="#ffff7f"
        color
        ></u-search>

        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                num:''
            }
        },
        methods:{
            change_rate(e){
                console.log(e)
            },
            change_search(e){
                console.log(e)
            },
        }
    }
</script>

NumberBox 步进器 

<template>
    <u-number-box v-model="value" @change="valChange"></u-number-box>
</template>

<script>
    export default {
        data() {
            return {
                value: 0
            }
        },
        methods: {
            valChange(e) {
                console.log('当前值为: ' + e.value)
            }
        }
    }
</script>

Upload 上传

该组件用于上传图片场景

<template>
    <view>
        <u-upload ref="uUpload" :action="action" :auto-upload="false" ></u-upload>
        <u-button @click="submit">提交</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 非真实地址
                action: 'http://www.example.com/upload',
            }
        },
        methods: {
            submit() {
                this.$refs.uUpload.upload();
            },
        }
    }
</script>

 VerificationCode 验证码倒计时

<template>
    <view class="wrap">
        <u-toast ref="uToast"></u-toast>
        <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
        @change="codeChange"></u-verification-code>
        <u-button @tap="getCode">{{tips}}</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tips: '',
                // refCode: null,
                seconds: 10,
            }
        },
        onReady() {
            // 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
            // 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
            // this.refCode = this.$refs.uCode;
        },
        methods: {
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
                if(this.$refs.uCode.canGetCode) {
                    // 模拟向后端请求验证码
                    uni.showLoading({
                        title: '正在获取验证码'
                    })
                    setTimeout(() => {
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        this.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    }, 2000);
                } else {
                    this.$u.toast('倒计时结束后再发送');
                }
            },
            end() {
                this.$u.toast('倒计时结束');
            },
            start() {
                this.$u.toast('倒计时开始');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .wrap {
        padding: 24rpx;
    }
</style>

 手机验证码需要用到阿里云的短信服务搭配以下两个组件使用：

Checkbox 复选框

 

复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 该组件无需强制搭配checkboxGroup组件使用(视情况而定)，可以单个独立使用u-checkbox组件
• 通过v-model给checkbox绑定一个变量，这个绑定的变量是双向的(初始值只能是true或者false)，也就是说，您可以无需监听checkbox或者checkboxGroup组件的change事件，也能知道哪个复选框 被勾选了

<template>
	<view class="">
		<u-checkbox-group @change="checkboxGroupChange">
			<u-checkbox 
				@change="checkboxChange" 
				v-model="item.checked" 
				v-for="(item, index) in list" :key="index" 
				:name="item.name"
			>{{item.name}}</u-checkbox>
		</u-checkbox-group>
		<u-button @click="checkedAll">全选</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: 'apple',
					checked: false,
					disabled: false
				},
				{
					name: 'banner',
					checked: false,
					disabled: false
				},
				{
					name: 'orange',
					checked: false,
					disabled: false
				}
			]
		};
	},
	methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			//console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			// console.log(e);
		},
		// 全选
		checkedAll() {
			this.list.map(val => {
				val.checked = true;
			})
		}
	}
};
</script>

Radio 单选框

单选框用于有一个选择，用户只能选择其中一个的场景。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 该组件需要搭配radioGroup组件使用，以便用户进行操作时，获得当前单选框组的选中情况，当然，您也可以单独对某个radio进行事件监听
• 通过v-model给radioGroup组件绑定一个变量，这个绑定的变量是双向的(初始值只能是true或者false)，也就是说，您可以无需监听radio或者radioGroup组件的change事件，也能知道哪个 被勾选了

注意： 由于radio组件需要由radioGroup组件提供参数值，这些父子组件间通过Vue的"provide/inject"特性注入依赖， 所以您必须使用radioGroup包裹radio组件才能正常使用。

Slider 滑动选择器

 

<template>
    <view class="wrap">
        <u-slider style="margin-top: 100px;" v-model="value" :use-slot="true">
            <!-- 这里外面需要多一层view，否则".badge-button"样式可能不生效 -->
            <view class="">
                <u-icon name="star-fill" color="#ff1f0f" size="50">
                </u-icon>{{value}}
            </view>
        </u-slider>
    </view>
</template>
    
<script>
    export default {
        data() {    
            return {
                value: 30
            }
        }
    }
</script>

<style scoped lang="scss">
    .wrap {
        padding: 30rpx;
    }
    
    .badge-button {
        padding: 4rpx 6rpx;
        background-color: $u-type-error;
        color: #fff;
        border-radius: 10rpx;
        font-size: 22rpx;
        line-height: 1;
    }
</style>

 CircleProgress 圆形进度条

效果图

<template>
    <u-circle-progress active-color="#2979ff" :percent="100">
        <view class="u-progress-content">
            <view class="u-progress-dot"></view>
            <text class='u-progress-info'>下载中</text>
        </view>
    </u-circle-progress>
</template>

<style lang="scss" scoped>
    .u-progress-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .u-progress-dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #fb9126;
    }
    
    .u-progress-info {
        font-size: 28rpx;
        padding-left: 16rpx;
        letter-spacing: 2rpx
    }
</style>

Table 表格

效果图

 

<template>
    <u-table>
        <u-tr>
            <u-th>学校</u-th>
            <u-th>班级</u-th>
            <u-th>年龄</u-th>
        </u-tr>
        <u-tr>
            <u-td>浙江大学</u-td>
            <u-td>二年级</u-td>
            <u-td>22</u-td>
        </u-tr>
        <u-tr>
            <u-td>清华大学</u-td>
            <u-td>05班</u-td>
            <u-td>20</u-td>
        </u-tr>
    </u-table>
</template>

 

CountDown 倒计时 

效果图

该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。

<template>
    <view>
        <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
        <button @tap="start">启动</button>
        <button @tap="stop">暂停</button>
        <button @tap="resume">继续</button>
        <button @tap="reset">重置</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                endVal: 5000.55,
                autoplay: false
            };
        },
        methods: {
            start() {
                this.$refs.uCountTo.start();
            },
            stop() {
                this.$refs.uCountTo.stop();
            },
            resume() {
                this.$refs.uCountTo.resume();
            },
            reset() {
                this.$refs.uCountTo.reset();
            }
        }
    }
</script>

ActionSheet 操作菜单 

<template>
    <view>
        <u-action-sheet :list="list" @click="click" v-model="show"
        fontSize="10px" color="#FF0066"></u-action-sheet>
        <button @tap="click_show">ActionSheet操作菜单</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    text: '点赞',
                    color: 'blue',
                    fontSize: 28
                }, {
                    text: '分享'
                }, {
                    text: '评论'
                }],
                show: false
            }
        },
        methods: {
            click(index) {
                console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
            },
            click_show() {
                this.show=true
            }
        }
    }
</script>

AlertTips 警告提示 

使用场景

• 当某个页面需要向用户显示警告的信息时。
• 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

<template>
    <view>
        <u-alert-tips :show="show" type="error" @close="show = false" :title="title" :close-able="true"></u-alert-tips>
    </view>
</template>

<script>
    export default {
        data() {
            return{
                title: '寻隐者不遇',
                description: '松下问童子，言师采药去。只在此山中，云深不知处。',
                show: true
            }
        }
    }
</script>

 

 

Toast 消息提示

此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方，具体表现在：

• uView的toast有5种主题可选
• 可以配置toast结束后，跳转相应URL
• 目前没有加载中的状态，请用uni的uni.showLoading，这个需求uni已经做得很好

注意：

由于uni中无法通过js创建元素，所以需要在页面中调用<toast />组件，再通过ref开启

基本使用

以下为一个模拟登录成功后，弹出toast提示，并在一定时间(默认2000ms)后，自动跳转页面到个人中心页(也可以配置跳转的参数)的示例

<template>
	<view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		methods: {
			showToast() {
				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					url: '/pages/user/index'
				})
			}
		}
	}
</script>

 

NoticeBar 滚动通知

该组件用于滚动通告场景，有多种模式可供选择

<template>
	<view>
		<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
		
		<u-notice-bar mode="horizontal" :is-circular="false" :list="list"></u-notice-bar>
		
		<u-notice-bar mode="vertical" :list="list"></u-notice-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				]
			}
		}
	}
</script>

TopTips 顶部提示

该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。

基本使用

该组件通过ref调用，使用简单，只需title参数设置显示的内容即可

注意：不要在onLoad中调用，应在onReady生命周期调用，因为onLoad生命周期组件尚未创建完成

<template>
	<view>
		<u-top-tips ref="uTips"></u-top-tips>
		<button @tap="click_show">TopTips顶部提示</button>
	</view>
</template>

<script>
	export default {
		onReady() {
			
		},
		methods:{
			click_show() {
				this.$refs.uTips.show({
					title: '铁马冰河入梦来',
					type: 'success',
					duration: '2300'
				})
			}
		}
	}
</script>

 

Collapse 折叠面板

通过折叠面板收纳内容区域

 

<template>
    <view>
        <u-collapse>
            <u-collapse-item  :title="item.head" v-for="(item, index) in itemList" :key="index">
                {{item.body}}
            </u-collapse-item>
        </u-collapse>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                itemList: [{
                    head: "赏识在于角度的转换",
                    body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
                    open: true,
                    disabled: true
                },{
                    head: "生活中不是缺少美，而是缺少发现美的眼睛",
                    body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
                    open: false,
                },{
                    head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
                    body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
                    open: false,
                }],
            }
        }
    }
</script>

 

Popup 弹出层

弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义

 

<template>
    <view>
        <u-popup v-model="show" mode="left" border-radius="14"
        width="500rpx"
        height="100rpx"
        style="background-color: antiquewhite;
        text-align: center;">
            <view>出淤泥而不染，濯清涟而不妖</view>
            <view>出淤泥而不染，濯清涟而不妖</view>
            <view>出淤泥而不染，濯清涟而不妖</view>
            <view>出淤泥而不染，濯清涟而不妖</view>
            <view>出淤泥而不染，濯清涟而不妖</view>
            <view>出淤泥而不染，濯清涟而不妖</view>
        </u-popup>
        <u-button @click="show = true">打开</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false
            }
        }
    }
</script>

SwipeAction 滑动操作

 

该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。

<template>
    <view>
        <u-swipe-action :show="item.show" :index="index"
            v-for="(item, index) in list" :key="item.id"
            @click="click" @open="open"
            :options="options"
        >
            <view class="item u-border-bottom">
                <image mode="aspectFill" :src="item.images" />
                <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
                <view class="title-wrap">
                    <text class="title u-line-2">{{ item.title }}</text>
                </view>
            </view>
        </u-swipe-action>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        id: 1,
                        title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
                        images: 'https://cdn.uviewui.com/uview/common/logo.png',
                        show: false
                    },
                    {
                        id: 2,
                        title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
                        images: 'https://cdn.uviewui.com/uview/common/logo.png',
                        show: false
                    },
                    {
                        id: 3,
                        title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
                        images: 'https://cdn.uviewui.com/uview/common/logo.png',
                        show: false,
                    }
                ],
                disabled: false,
                btnWidth: 180,
                show: false,
                options: [
                    {
                        text: '收藏',
                        style: {
                            backgroundColor: '#007aff'
                        }
                    },
                    {
                        text: '删除',
                        style: {
                            backgroundColor: '#dd524d'
                        }
                    }
                ]
            };
        },
        methods: {
            click(index, index1) {
                if(index1 == 1) {
                    this.list.splice(index, 1);
                    this.$u.toast(`删除了第${index}个cell`);
                } else {
                    this.list[index].show = false;
                    this.$u.toast(`收藏成功`);
                }
            },
            // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
            open(index) {
                // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
                // 原本为'false'，再次设置为'false'会无效
                this.list[index].show = true;
                this.list.map((val, idx) => {
                    if(index != idx) this.list[idx].show = false;
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    .item {
        display: flex;
        padding: 20rpx;
    }
    
    image {
        width: 120rpx;
        flex: 0 0 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 12rpx;
    }
    
    .title {
        text-align: left;
        font-size: 28rpx;
        color: $u-content-color;
        margin-top: 20rpx;
    }
</style>

 

Modal 模态框

弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。

 

<template>
    <view>
        <u-modal v-model="show" :content="content"></u-modal>
        <u-button @click="open">
            打开模态框
        </u-button>
    </view>
</template>
    
<script>
    export default {
        data() {    
            return {
                show: false,
                content: '东临碣石，以观沧海'
            }
        },
        methods: {
            open() {
                this.show = true;
            }
        }
    }
</script>

 

 

ullScreen 压窗屏

所谓压窗屏，是指遮罩能盖住原生导航栏和底部tabbar栏的弹窗，一般用于在APP端弹出升级应用弹框，或者其他需要增强型弹窗的场景。

<template>
    <u-modal v-model="show" :show-cancel-button="true" confirm-text="升级"
        title="发现新版本" @cancel="cancel" @confirm="confirm"
    >
        <view class="u-update-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </u-modal>
</template>

<script>
    export default {
        data() {
            return {
                show: true,
                // 传递给uni-app"rich-text"组件的内容，可以使用"<br>"进行换行
                content: `
                    1. 修复badge组件的size参数无效问题<br>
                    2. 新增Modal模态框组件<br>
                    3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
                    4. 修复键盘组件在微信小程序上遮罩无效的问题
                `,
            }
        },
        onReady() {
            this.show = true;
        },
        methods: {
            cancel() {
                this.closeModal();
            },
            confirm() {
                this.closeModal();
            },
            closeModal() {
                uni.navigateBack();
            }
        }
    }
</script>

<style scoped lang="scss">
    .u-full-content {
        background-color: #00C777;
    }
    
    .u-update-content {
        font-size: 26rpx;
        color: $u-content-color;
        line-height: 1.7;
        padding: 30rpx;
    }
</style>

 

Line 线条

 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。

基本使用

组件内部有预置的参数，直接使用即可，有如下几个参数需要了解：

• color为线条的颜色
• direction为线条的方向，默认为横向
• hair-line为是否设置细线条(0.5px)，默认为true
• length参数需要特别留意，它需要带上单位，比如设置为"50%"，"500rpx"等，在线条为横向时，表现为线条的长度；在线条为竖向时，表现为线条的高度。

<template>
	<u-line color="red" />
	
	/* 等同于 */
	<u-line color="red"></u-line>
</template>

线条类型 1.3.7

我们可以通过border-style参数设置线条的类型，有如下三种可选项：

• solid表示实线
• dashed表示方形虚线
• dotted表示圆点虚线

兼容性

由于头条小程序的兼容性，如果组件无效的情况下，您可能需要给组件加上u-line类，如下：

<u-line class="u-line"></u-line>

API

Props

参数	说明	类型	默认值	可选值
color	线条的颜色	String	#e4e7ed	-
length	长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等	String	100%	-
direction	线条的方向，row-横向，col-竖向	String	row	col
hair-line	是否显示细线条	Boolean	true	false
margin	线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"	String	-	-
border-style 1.3.7	线条类型，见上方说明	String	solid	dashed / dotted

Card 卡片

卡片组件一般用于多个列表条目，且风格统一的场景。

此组件测试报错

Mask 遮罩层

创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 通过show参数配置是否显示遮罩
• 遮罩被点击时，会发送一个click事件，如不需要此事件，请设置mask-click-able参数为false

<template>
	<u-mask :show="show" @click="show = false"></u-mask>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		}
	}
</script>

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容
注意：如果不想让slot插槽内容的点击事件冒泡到遮罩，请给指定元素添加上@tap.stop

<template>
	<u-mask :show="show" @click="show = false">
		<view class="warp">
			<view class="rect" @tap.stop></view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		}
	}
</script>

<style scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}
</style>

遮罩样式

• 通过duration设置遮罩淡入淡出的时长，单位ms
• 通过zoom设置遮罩淡入淡出时是否带有轻微的缩放效果，内部通过transform: scale(1.2, 1.2)实现
• 通过custom-style传入一个对象，自定义样式，如"{backgroundColor: 'red', color: 'blue'}"

<u-mask :show="show" :duration="400" :zoom="true" :custom-style="{background: 'rgba(0, 0, 0, 0.5)'}"></u-mask>

NoNetwork 无网络提示

该组件无需任何配置，引入即可，内部自动处理所有功能和事件，有如下特点：

• 如果没有网络，该组件会以fixed定位，并且以很大的z-index值覆盖原来的内容。一旦有网络了，会自动隐藏该组件，实现自动化
• 在APP上，嵌入了5+接口，可以直接打开手机的设置页面，方便用户进行网络相关的设置

说明

1. 应用有网络时，是不会触发本组件的，为了测试此功能，请关闭手机的数据连接以及WiFi即可
2. 由于普通的组件无法覆盖原生组件，所以本组件不适用那些有video，map等原生表现的组件的页面，可以自行使用uni的cover-view组件修改

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	x	√

基本使用

<template>
	<view>
		<view class="u-text">
			这里是页面正式内容
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style lang="scss" scoped>
	.u-text {
		padding-top: 300rpx;
		font-size: 30rpx;
		color: $u-type-primary;
		text-align: center;
	}
</style>

兼容性

• 头条小程序不支持监听网络状态变化，故本组件不支持头条小程序

API

Props

参数	说明	类型	默认值	可选值
tips	没有网络时的提示语	String	哎呀，网络信号丢失	-
zIndex	组件的z-index值	String | Number	10080	-
image	无网络的图片提示，可用的src地址或base64图片	String	-	-

Events

事件名	说明	回调参数
retry	用户点击页面的"重试"按钮时触发	-

 

Grid 宫格布局  类型多 较复杂请参见uview官方文档

宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。

Swiper 轮播图

该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：

• 内置多种指示器模式，可配置指示器位置
• 3D轮播图效果
• 可配置是否显示标题

<template>
    <view class="wrap">
        <u-swiper :list="list"></u-swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
                        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
                    },
                    {
                        image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
                        title: '身无彩凤双飞翼，心有灵犀一点通'
                    },
                    {
                        image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
                        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                    }
                ],
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .wrap {
        padding: 40rpx;
    }
</style>

 

 

TimeLine 时间轴 待研究左边自定义图标显示不全

时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。

基本使用

• 该组件左边图标默认为显示一个点，如需自定义，请通过name为node的slot传入内容
• 组件右边内容为了更强的自定义，需要请通过name为content的slot传入

以下为基本示例，完整示例请见演示部分

<template>
	<u-time-line>
		<u-time-line-item nodeTop="2">
			<!-- 此处自定义了左边内容，用一个图标替代 -->
			<template v-slot:node>
				<view class="u-node" style="background: #19be6b;">
					<!-- 此处为uView的icon组件 -->
					<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
				</view>
			</template>
			<template v-slot:content>
				<view>
					<view class="u-order-title">待取件</view>
					<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
					<view class="u-order-time">2019-05-08 12:12</view>
				</view>
			</template>
		</u-time-line-item>
		<u-time-line-item>
			<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
			<template v-slot:content>
				<view>
					<view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
					<view class="u-order-time">2019-12-06 22:30</view>
				</view>
			</template>
		</u-time-line-item>
	</u-time-line>
</template>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>

 

注意事项

如果自定义了左边的图标等内容，有可能左边的图标无法和右边的内容平齐，可以调整time-line-item组件的node-top参数来达到想要的效果

<u-time-line-item node-top="2">
	<template v-slot:node>
		<u-icon name="pushpin-fill" color="#ddd" :size="24"></u-icon>
	</template>
	<template v-slot:content>
		......
	</template>
</u-time-line-item>

 

Skeleton 骨架屏

骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。

说明

该组件原理是通过uni的uni.createSelectorQuery接口，查询页面带有指定类名的元素的位置和尺寸， 通过绝对定位的方式，用同样尺寸的灰色块定位到相同的位置。
所以要求在请求数据尚未完成时，填写一些模拟数据，才能让对应的元素有对应的尺寸和位置，供uni.createSelectorQuery查询使用

基本使用

该组件的使用，需要有几个类名是必须的，如下：

• u-skeleton(必须)，该类名用于页面的最外层元素，供骨架屏组件查询和定位出绘制骨架的位置和尺寸
• u-skeleton-circle(可选)，该类名用于页面的圆形元素，供骨架组件描绘出圆形的骨架块
• u-skeleton-rect(可选)，该类名用于页面的矩形元素，供骨架组件描绘出矩形的骨架块
• u-skeleton-fillet(可选)，该类名用于页面的矩形带圆角元素，供骨架组件描绘出矩形带圆角的骨架块

数据请求完成后，将loading设置为false，会隐藏骨架组件

<template>
	<view>
		<view class="container u-skeleton">
			<view class="userinfo">
				<block>
					<!--u-skeleton-circle 绘制圆形-->
					<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image>
					<!--u-skeleton-fillet 绘制圆角矩形-->
					<text class="u-skeleton-fillet">{{userInfo.nickName}}</text>
				</block>
			</view>
			<view style="margin: 20px 0">
				<view v-for="(item,index) in lists" :key="index" class="lists">
					<!--u-skeleton-rect 绘制矩形-->
					<text class="u-skeleton-rect">{{item}}</text>
				</view>
			</view>
		</view>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 随意填充一些模拟数据，以撑开元素，供骨架组件查询和模拟块状数据
				userInfo: {
					avatarUrl: 'https://qlogo2.store.qq.com/qzone/1416956117/1416956117/100?1531323520',
					nickName: 'uView'
				},
				lists: [
					'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					'人生得意须尽欢，莫使金樽空对月',
					'天生我材必有用，千金散尽还复来',
				],
				loading: true, // 是否显示骨架屏组件
			}
		},
		onLoad() {
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			setTimeout(() => {
				this.loading = false;
			}, 2000)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 60rpx;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}

	.lists {
		margin: 10px 0;
	}
</style>

加载中动画

设置animation为true，加载中的骨架块将会有一个动画效果，用以加强视觉效果。

<u-skeleton :loading="true" :animation="true"></u-skeleton>

其他设置

• 通过el-color参数设置骨架块的背景颜色
• 通过bg-color参数设置整个骨架组件的背景颜色

<u-skeleton :loading="true" el-color="#ddd" bg-color="#fff"></u-skeleton>

API

Props

参数	说明	类型	默认值	可选值
el-color	骨架块状元素的背景颜色	String	#e5e5e5	-
bg-color	骨架组件背景颜色	String	#ffffff	-
animation	骨架块是否显示动画效果	Boolean	false	true
border-radius	u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx	String | Number	10	-
loading	是否显示骨架组件，请求完成后，将此值设置为false	Boolean	true	false

 

Sticky 吸顶

该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。

提示

由于右侧的演示是通过iframe标签引入的，缺少了手机端运行的相关API，所以吸顶是看不到效果的，手机端有不会这些问题，请在右上角的“演示”中用手机扫码查看对应的效果

 

<template>
    <view class="container">
        <u-sticky>
            <!-- 只能有一个根元素 -->
            <view class="sticky">
                宝剑锋从磨砺出,梅花香自苦寒来
            </view>
        </u-sticky>
    </view>
</template>

<style lang="scss" scoped>
    .container {
        height: 200vh;
        margin-top: 150rpx;
    }
    
    .sticky {
        width: 750rpx;
        height: 120rpx;
        background-color: #2979ff;
        color: #fff;
        padding: 24rpx;
    }
</style>

 

1Waterfall 瀑布流

这是一个瀑布流形式的组件，内容分为左右两列，结合uView的懒加载组件效果更佳。
相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。

提示

由于右侧的演示是通过iframe标签引入的，缺少了手机端运行的相关API，或者因为演示区域太小，或者电脑分别率不够高 ，导致演示可能会有问题，手机端有不会这些问题，请在右上角的"演示"中用手机扫码查看对应的效果。

注意

1. 在微信小程序中，需要hx2.8.11才支持在懒加载中结合其他组件
2. 从1.2.8版本起，新增了清空列表和移除某条数据的组件方法，原flow-list参数，需要改为v-model接收传值
3. 由于hx的问题，支付宝小程序需要hx2.8.2版本及以上才支持本组件

完整应用示例

<template>
	<view class="wrap">
		<u-button @click="clear">清空列表</u-button>
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{{item.shop}}
					</view>
					<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{{item.shop}}
					</view>
					<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 385,
						title: '大河上下，顿失滔滔',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
					},
					{
						price: 784,
						title: '欲与天公试比高',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
					},
					{
						price: 7891,
						title: '须晴日，看红装素裹，分外妖娆',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
					},
					{
						price: 2341,
						shop: '李白杜甫白居易旗舰店',
						title: '江山如此多娇，引无数英雄竞折腰',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
					},
					{
						price: 661,
						shop: '李白杜甫白居易旗舰店',
						title: '惜秦皇汉武，略输文采',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
					},
					{
						price: 1654,
						title: '唐宗宋祖，稍逊风骚',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 1678,
						title: '一代天骄，成吉思汗',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 924,
						title: '只识弯弓射大雕',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
				]
			}
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>

 

Divider 分割线

区隔内容的分割线，一般用于页面底部"没有更多"的提示。

 

Dropdown 下拉菜单 1.6.3 (类似于淘宝的综合 销量搜索)

感觉自己以后开发的app很难用到 所以没有测试

该组件一般用于向下展开菜单，同时可切换多个选项卡的场景。

Tabbar 底部导航栏 1.4.8

优点：

此组件一般用于应用的底部导航，具有如下特点：

• 可以设置凸起的按钮，且是全端通用的
• 图标可以使用字体图标(内置图标和扩展图标)或者图片
• 可以动态切换菜单的数量以及配置
• 切换菜单之前，可以进行回调鉴权
• 可以设置角标
• 有效防止组件区域高度塌陷，无需给父元素额外的内边距或者外边距来避开导航的区域

缺点：

虽然优点很多，但是如果用此组件模拟tabbar页面的话依然是瑜不掩瑕的，因为它同样带来很多难以解决的缺点：

• 首先是性能问题，在uni-app的vue版本上，自定义tabbar让您不得不在一个webview内模拟出多个页面，这存在严重的性能问题
• 相比原生的uni-app的tabbar，自定义tabbar让你失去了路由管理的功能
• 渲染的速度比不上原生的tabbar，但是这影响不大

 

BackTop 返回顶部 1.3.0

该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。

<template>
    <view class="wrap">
        <text>滑动页面，返回顶部按钮将出现在右下角</text>
        <u-back-top :scroll-top="scrollTop"></u-back-top>
    </view>
</template>

<script>
export default {
    data() {
        return {
            scrollTop: 0
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    }
};
</script>

<style lang="scss" scoped>
    .wrap {
        height: 200vh;
    }
</style>

 

Navbar 自定义导航栏

自定义导航栏颜色

uView提供了一个background参数(需对象形式)，可以自定义导航栏的背景颜色：

• 这个颜色，在APP和小程序上，包括状态的颜色在内
• 如果是定义纯色的背景，可以设置backgroundColor属性
• 如果是定义渐变的背景，可以设置backgroundImage属性
• 如果是定义背景图，可以设置background属性，还可以加上其他属性，比如no-repeat，center等

<template>
	<view>
		<u-navbar :is-back="false" title="" :background="background">
			
		</u-navbar>
		<view class="content">
			<!-- 正文内容 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#001f3f',
					
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}
			}
		}
	}
</script>

 

tabs 标签

该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。

uView中，共有2个组件可以实现tabs标签切换，分别是tabs组件，tabsSwiper组件，他们的异同点是：

• tabs组件可以不结合uni-appswiper轮播组件使用，tabsSwiper组件是必须要结uni-appswiper轮播组件才能使用的。
• tabs组件使用更简洁明了(这也是其存在的理由)，tabsSwiper组件配置相对复杂一些。
• tabsSwiper组件相比tabs组件，由于搭配了uni-appswiper轮播组件，获得了滑块跟随，标签颜色渐变等效果(请在演示中扫码查看效果)，而tabs组件是不具备的。

总的来说，二者配置参数和功能都差不多，看用户的需求自行衡量该使用哪一个组件。

<template>
    <view>
        <u-tabs :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
        
    </view>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                    name: '待收货'
                }, {
                    name: '待付款'
                }, {
                    name: '待评价',
                    count: 5
                }, {
                    name: '待评价',
                    count: 5
                }, {
                    name: '待评价',
                    count: 5
                }, {
                    name: '待评价',
                    count: 5
                }, {
                    name: '待评价',
                    count: 5
                }, {
                    name: '待评价',
                    count: 5
                }],
                current: 0
            }
        },
        methods: {
            change(index) {
                this.current = index;
            }
        }
    }
</script>

1tabsSwiper 全屏选项卡 较复杂 参见官方文档

该组件内部实现主要依托于uni-appscroll-view和swiper组件，主要特色是切换过程中，tabsSwiper文字的颜色可以渐变，底部滑块可以 跟随式滑动，活动tab滚动居中等。应用场景可以用于需要左右切换页面，比如商城的订单中心(待收货-待付款-待评价-已退货)等应用场景。

uView中，共有2个组件可以实现tabs标签切换，分别是tabs组件，tabsSwiper组件，他们的异同点是：

• tabs组件可以不结合uni-appswiper轮播组件使用，tabsSwiper组件是必须要结uni-appswiper轮播组件才能使用的。
• tabs组件使用更简洁明了(这也是其存在的理由)，tabsSwiper组件配置相对复杂一些。
• tabsSwiper组件相比tabs组件，由于搭配了uni-appswiper轮播组件，获得了滑块跟随，标签颜色渐变等效果(请在演示中扫码查看效果)，而tabs组件是不具备的。

总的来说，二者配置参数和功能都差不多，看用户的需求自行衡量该使用哪一个组件。

 

Subsection 分段器

该分段器一般用于用户从几个选项中选择某一个的场景

<template>
    <u-subsection :list="list" :current="1"></u-subsection>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        name: '待发货'
                    },
                    {
                        name: '待付款'
                    },
                    {
                        name: '待评价'
                    }
                ],
                current: 1
            }
        }
    }
</script>

 

IndexList 索引列表

通过折叠面板收纳内容区域

 

<template>
    <u-index-list :scrollTop="scrollTop">
        <view v-for="(item, index) in indexList" :key="index">
            <u-index-anchor :index="item" />
            <view class="list-cell">
                列表1
            </view>
            <view class="list-cell">
                列表2
            </view>
            <view class="list-cell">
                列表3
            </view>
        </view>
    </u-index-list>
</template>

<script>
    export default {
        data() {
            return {
                scrollTop: 0,
                indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
                    "V", "W", "X", "Y", "Z"
                ]
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        }
    }
</script>

<style lang="scss" scoped>
    .list-cell {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 24rpx;
        overflow: hidden;
        color: #323233;
        font-size: 14px;
        line-height: 24px;
        background-color: #fff;
    }
</style>

Steps 步骤条

该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。

 

基本使用

• 通过list参数传入一个数组，标识步骤的总数
• 通过current参数标识目前处于第几步，从0开始

<template>
	<view>
		<u-steps :list="numList" :current="1"></u-steps>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: [{
					name: '下单'
				}, {
					name: '出库'
				}, {
					name: '运输'
				}, {
					name: '签收'
				}, ],
			}
		}
	}
</script>

Empty 内容为空

该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。

 

基本使用

提示

从1.4.2版本起，移除了此组件内置的图片，因为这些图片太大，影响了组件库的大小。改用字体图标的形式提供，缺点是字体图标只能是单色的，形状与原来的图片也有些许出入。 基于以上，我们的专业设计师精心为您准备了一套精美缺省图，带有图片和Sketch文件，您可以下载或修改后再使用：资源下载

• 通过text参数配置提示的文字内容
• 通过mode(默认为data)参数配置要显示的图标

<u-empty text="所谓伊人，在水一方" mode="list"></u-empty>

内置图标

这些图标已内置，直接通过mode参数引用即可

名称	说明
car	购物车为空
page	页面不存在
search	没有搜索结果
address	没有收货地址
wifi	没有WiFi
order	订单为空
coupon	没有优惠券
favor	无收藏
permission	无权限
history	无历史记录
news	无新闻列表
message	消息列表为空
list	列表为空(通用)
data	数据为空(默认，通用)

API

Props

参数	说明	类型	默认值	可选值
color	文字颜色	String	#c0c4cc	-
text	文字提示	String	无内容	-
icon-color 1.4.2	icon的颜色，字体图标时有效	String	#c0c4cc	-
icon-size 1.4.2	icon的大小，单位rpx，如果src为图片路径，此参数可以设置图片的尺寸	String | Number	120	-
src	图标名称或者图片路径(绝对路径)，如定义，mode参数会失效	String	-	-
font-size	提示文字的大小，单位rpx	String | Number	28	-
mode	内置的图标，见上方说明	String	data	-
img-width 1.4.2起废弃	图标的宽度，单位rpx	String | Number	240	-
img-height 1.4.2起废弃	图标的高度，单位rpx	String	auto	-
show	是否显示组件	Boolean	true	false
margin-top	组件到上一个元素的间距,单位rpx	String | Number	0	-

Slot

名称	说明
bottom	给组件底部传入slot内容

Link 超链接

该组件为超链接组件，在不同平台有不同表现形式：

• 在APP平台会通过plus环境打开内置浏览器
• 在小程序中把链接复制到粘贴板，同时提示信息
• 在H5中通过window.open打开链接

 

基本使用

• 通过href设置打开的链接，slot传入显示的内容

<u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link>

下划线

通过under-line设置是否显示链接的下划线

<u-link href="http://www.uviewui.com" :under-line="true">蒹葭苍苍，白露为霜</u-link>

API

Props

参数	说明	类型	默认值	可选值
color	文字颜色	String	#606266	-
font-size	字体大小，单位rpx	String | Number	28	-
under-line	是否显示下划线	Boolean	false	true
href	跳转的链接，要带上http(s)	String	-	-
line-color	下划线颜色，默认同color参数颜色	String	-	-
mp-tips	各个小程序平台把链接复制到粘贴板后的提示语	String	链接已复制，请在浏览器打开	-

 

Section 查看更多

该组件一般用于分类信息有很多，但是限于篇幅只能列出一部分，让用户通过"查看更多"获得更多信息的场景，实际效果见演示。

基本使用

说明：此组件会在最左边显示一个竖条

• 通过title参数设置主标题
• 通过sub-title参数设置副标题

<u-section title="今日热门" sub-title="查看更多"></u-section>

是否显示右边内容

可以通过设置right为false来隐藏右边的内容

<u-section title="今日热门" :right="false"></u-section>

API

Props

参数	说明	类型	默认值	可选值
title	左边主标题	String	-	-
sub-title	右边副标题	String	更多	-
right	是否显示右边的内容	Boolean	true	false
show-line 1.3.3	是否显示左边的竖条	Boolean	true	false
font-size	主标题的字体大小	String | Number	28	-
bold	主标题是否加粗	Boolean	true	false
color	主标题颜色	String	#303133	-
sub-color	右边副标题的颜色(右箭头同此颜色)	String	#909399	-
line-color 1.5.5	左边竖线的颜色，默认同color参数值	String	-	-
arrow 1.6.0	是否显示右边箭头	Boolean	true	false

Events

事件名	说明	回调参数	版本
click	组件右侧的内容被点击时触发，用于跳转"更多"	-	-

Slot

名称	说明
right 1.6.0	自定义右侧内容

Parse 富文本解析器 1.5.3

该组件一般用于富文本解析场景，比如解析文章内容，商品详情，带原生HTML标签的各类字符串等，此组件和uni-app官方的rich-text组件功能有重合之处，但是也有不同的地方。

相同点：

• 二者都能解析HTML字符串

不同点：

• 对于轻量、简单的字符串，rich-text性能更好
• 对于复杂的字符串，使用parse组件效果更好，有更多的自定义属性和效果

总结：如果是简单的场景，比如一段简单的文字和图片内容，可以优先使用rich-text组件，在文章内容，商品详情等复杂的文本详情，可以优先使用parse组件。

提示

此组件源于开源的优秀作品Parser

(opens new window)，本文档只对重要的功能进行介绍，如果需要更详细的说明，请参考Parser

(opens new window)官方文档。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过html参数绑定需要解析的内容即可。

<template>
	<view class="u-content">
		<u-parse :html="content"></u-parse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-content {
		margin-top: 100rpx;
	}
</style>

长按复制

可以通过设置selectable参数为true来实现长按复制的效果

<u-parse :html="content" :selectable="true"></u-parse>

设置样式

可以有两种方法可设置富文本的样式：

• 通过组件的tag-style参数可以精细化的对单独的标签设置样式，注意此方式设置的样式为字符串的形式，而非对象形式：

<template>
	<view class="u-content">
		<u-parse :html="content" :tag-style="style"></u-parse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				style: {
					// 字符串的形式
					p: 'color: red;font-size:32rpx',
					span: 'font-size: 30rpx'
				}
			}
		},
	}
</script>

• 通过父元素标签，统一设置全文的颜色，行高，字体大小等，注意这种方式无法对单独的标签设置样式：

<template>
	<view class="u-content">
		<u-parse :html="content"></u-parse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-content {
		margin-top: 100rpx;
		color: $u-content-color;
		font-size: 32rpx;
		line-height: 1.8;
		
		// 标签形式无效
		p {
			color: $u-tips-color;
		}
	}
</style>

懒加载和占位图

• 设置lazy-load为true即可开启图片懒加载功能
• 设置loading-img为网络路径或者base64图片，可以在图片加载完成前展示占位图

<u-parse :html="content" :lazy-load="true" :loading-img="/xxx/xxx.jpg"></u-parse>

渐变动画

设置show-with-animation为true，可以让内容展示时，获得一个淡入的效果。

<u-parse :html="content" :show-with-animation="true"></u-parse>

图片预览

无需配置，点击图片，即可获得图片预览功能

链接跳转

H5、App（含NVUE）外链可以直接打开，小程序端将自动复制链接
小程序端a标签设置app-id后可以跳转到其他小程序

其他配置

本组件还有其他更多的配置功能，如获取页面的所有图片数组，跳转页内锚点，视频播放等，如需更多的配置信息，请移步parser插件文档：parser文档

(opens new window)

API

Props

参数	说明	类型	默认值	可选值
html	要显示的 html 字符串	String	-	-
autopause	是否允许播放视频时自动暂停其他视频	Boolean	true	false
autoscroll	是否自动给 table 加一个滚动层（使表格可以单独滚动）	Boolean	false	true
autosetTitle	是否自动将 title 标签的内容设置到页面标题	Boolean	true	false
compress	压缩等级，可以选择是否移除 id 和 class(不建议修改)	Number	0	1 / 2 / 3
domain	主域名，设置后将给链接自动拼接上主域名或协议名	String	-	-
lazy-load	是否开启图片懒加载	Boolean	false	true
loading-img	图片加载完成前的占位图，详见 占位图	String	-	-
selectable	是否允许长按复制内容	Boolean	false	true
show-with-animation	是否使用渐显动画	Boolean	false	true
tag-style	设置标签的默认样式	Object	-	-
use-anchor	是否使用页面内锚点	Boolean	false	true
use-cache	是否使用缓存，设置后多次打开不用重复解析	Boolean	false	true

Event

事件名	说明	回调参数
parse	解析完成时触发	返回解析结果，可以对该结果进行自定义修改，将在渲染时生效
load	dom 加载完成时触发	所有节点被添加到节点树中时触发，无返回值，可以调用 api
ready	渲染完成时触发	返回 boundingClientRect 的查询结果（包含宽高、位置等信息），所有图片（除懒加载）加载完成时才会触发，图片较大时可能 延时较长
error	出错时触发	返回一个 object，其中 source 是错误来源，errMsg 为错误信息，target 包含出错标签的具体信息
imgtap	图片被点击时触发	返回一个 object，其中 src 是图片链接，ignore 是一个函数，在事件中调用将不进行预览；可用于阻挡 onShow 的调用
linkpress	在链接被点击时触发	返回一个 object，其中包含了被点击的 a 标签的所有属性，ignore 是一个函数，在事件中调用后将不自动跳转/复制；可在该事件中进行下载文档等进一步操作

 

MessageInput 验证码输入

该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 通过mode参数模式，可取如下值：
• box(默认)-输入位置位一个方框
• bottomLine-底部显示一条横线
• middleLine-中部显示一条横线

<u-message-input mode="bottomLine"></u-message-input>

设置最大长度和初始值

• 通过maxlength参数配置可输入的方框个数，如5位验证码，该值设置为5即可
• 如果需要显示默认值，请通过value参数配置

<u-message-input maxlength="5" value="46821"></u-message-input>

是否自动获取焦点

如果需要一打开页面，就自动弹出键盘获取焦点，请配置focus值为true，否则需要用户手动点击输入区域才能唤起键盘

<u-message-input :focus="true"></u-message-input>

配置呼吸灯效果

配置breathe为true，当前激活输入框的样式会有一个类似光标一闪一闪的由浅到深的效果

<u-message-input :breathe="true"></u-message-input>

用"●"替代输入内容

dot-fill参数配置后，输入内容将不可见，用点替代，事件回调中会返回真实值

<u-message-input :dot-fill="true"></u-message-input>

禁止唤起系统键盘

uView有键盘组件，如果您想结合键盘组件进行自定义的输入效果，就需要设置disabled-keyboard为true，来保证点击 输入框时不会触发系统自带的键盘，否则会造成冲突。

事件回调

• 每当输入内容发生改变，会回调一个change事件，内容为当前输入的字符串，如"395"
• 当输入的内容长度(字符个数)达到maxlength值后，会触发finish事件，同时也会触发change事件

<template>
	<view>
		<u-message-input @change="change" @finish="finish"></u-message-input>
	</view>
</template>

<script>
	export default {
		methods: {
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			},
		}
	}
</script>

API

Props

参数	说明	类型	默认值	可选值
maxlength	输入字符个数	String | Number	4	-
dot-fill	是否用圆点填充	Boolean	false	true
mode	模式选择，见上方"基本使用"说明	String	box	bottomLine / middleLine
value	预置值	String | Number	-	-
breathe	是否开启呼吸效果，见上方说明	Boolean	true	false
focus	是否自动获取焦点	Boolean	false	true
bold	字体和输入横线是否加粗	Boolean	true	false
font-size	字体大小，单位rpx	String | Number	60	-
active-color	当前激活输入框的样式	String	#2979ff	-
inactive-color	非激活输入框的样式，文字颜色同此值	String	#606266	-
width	输入框的宽度(高等于宽)，单位rpx	String | Number	80	-
disabled-keyboard	禁止点击输入框唤起系统键盘	Boolean	false	true

Events

事件名	说明	回调参数	版本
change	输入内容发生改变时触发，具体见上方说明	value：当前输入的值	-
finish	输入字符个数达maxlength值时触发，见上方说明	value：当前输入的值	-

AvatarCropper 头像裁剪 经过测试打开图片剪裁失败

该组件一般的图片裁剪需求场景，尤其适合于头像裁剪方面。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

组件使用流程：

1. 打开头像裁剪页面，同时传递配置基本参数(已默认配置好最优参数)
2. 选取图片，调整图片合适位置和大小，确定裁剪并返回此裁剪结果
3. 在原始页面监听uAvatarCropper事件，获得裁剪结果

<template>
	<view class="wrap">
		<view class="u-avatar-wrap">
			<image class="u-avatar-demo" :src="avatar" mode="aspectFill"></image>
		</view>
		<u-button @tap="chooseAvatar">进入裁剪页</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
			}
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: 'http://www.example.com/upload',
					filePath: path,
					name: 'file',
					complete: (res) => {
						console.log(res);
					}
				});
			})
		},
		methods: {
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}

	.u-avatar-wrap {
		margin-top: 80rpx;
		overflow: hidden;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.u-avatar-demo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100rpx;
	}
</style>

注意事项

根据下载方式和NPM方式引入uView的不同，需要进行不同的处理，下载方式可以引用uview-ui中的某个文件当做页面文件，但是NPM方式，不能引入 node_modules文件夹中的uview-ui包的某个文件当做页面路径，故下方对两个方式分别说明：

1. 下载引入uView方式

• 裁剪页面内置在uView中，由于打开页面，需要先在pages.json声明页面，故请把以下内容复制到项目根目录的pages.json中的pages数组中：

{
	"path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper",
	"style": {
		"navigationBarTitleText": "头像裁剪",
		"navigationBarBackgroundColor": "#000000"
	}
}

1. NPM引入uView方式

您需要去node_modules文件中，按路径/node_modules/uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue找到此文件，将其内容复制出来， 放到/pages文件夹中的某个文件中，再按上面下载方式引入的一样的操作，去声明和引用页面即可。

• 裁剪后的结果，通过uni.$on监听uAvatarCropper事件，由于uni-app限制，H5端裁剪的结果为base64格式，其他端为blod二进制形式， 如果后端对接收格式有要求，请自行处理

API

以下参数，需要通过URL的get参数传参到裁剪页，非props。uView很多组件传递值的单位为rpx，注意这里的dest-width和rect-width单位为px

URL参数

参数	说明	类型	默认值	可选值
dest-width	输出图片宽度，高等于宽，单位px	String | Number	200	-
rect-width	裁剪框宽度，高等于宽，单位px	String | Number	200	-
file-type	输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可	String	jpg	png

Event

事件名	说明	回调参数
uAvatarCropper	裁剪结束后的事件，通过uni.$on监听	path: 裁剪的图片数据

 

loadMore 加载更多

此组件一般用于标识页面底部加载数据时的状态，共有三种状态：

• 加载前，显示"加载更多"，加入点击可选，是因为数据不够一页时，无法触发页面的onReachBottom生命周期
• 加载中，显示"正在加载..."，2种动画可选
• 加载后，如果还有数据，回到"加载前"状态，否则加载结束，显示"没有更多了" 

<template>
	<view class="wrap">
		<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
			{{'第' + item + '条数据'}}
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				list: 15,
				page: 0
			}
		},
		onReachBottom() {
			if(this.page >= 3) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				this.list += 10;
				if(this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}
	
	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
</style>

ReadMore 展开阅读更多 经过测试这个控件不起作用了

该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。

LazyLoad 懒加载

懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等
本组件高度封装和集成，创新性地使用uni.createIntersectionObserver 接口，保证高性能的同时，还有其他友好的可配置参数，比如预加载占位图，加载错误占位图，加载位置参数(threshold)，各种事件等。

提示

由于右侧的演示是通过iframe标签引入的，缺少了手机端运行的相关API，或者因为演示区域太小，或者电脑分别率不够高 ，导致演示可能会有问题，手机端有不会这些问题，请在右上角的"演示"中用手机扫码查看对应的效果。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过image参数传入图片的src路径即可

注意

由于uni-app默认给了image组件的height为225px，同时也只有在uni-appimage组件的mode参数为widthFix时，image才会自动计算出一个高度值 覆盖默认的height(225px)。其他mode参数下，如果设置height为auto，或者100%的话，图片将会无法显示。

所以：当您使用uView的lazyload组件时，如果设置height参数为auto，或者100%，而img-mode参数又不为widthFix的话，图片将会不显示，这不是uView的BUG。

结论：如果img-mode参数不为widthFix的话，必须设置height参数为一个固定的高度(单位rpx)，否则无效。

<template>
	<view>
		<u-lazy-load v-for="(item, index) in list" :key="index" :image="item.src"></u-lazy-load>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 设计成数组内嵌对象而不是纯数组形式，是考虑到真实环境后端返回的数据为如此形式
				list: [{
						src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						// 这里图片不存在，会加载失败，显示错误的占位图
						src: "xxx",
					},
				]
			}
		}
	}
</script>

配置占位图

占位图有两种情况：

• 一种是正常预加载时显示的，通过loading-img配置类似"正在加载"的占位图。
• 另一种是图片加载失败(如图片不存在，路径不完整等)，通过error-img参数配置类似"图片加载错误"的占位图

<template>
	<view>
		<u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				image: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
				loadingImg: '/static/uView/loading.png',
				errorImg: '/static/uView/load_error.png'
			}
		}
	}
</script>

图片加载位置

可以通过threshold参数设置图片距离屏幕底部多少距离时触发图片加载，单位rpx，说明：

• 如果取负值(如-300)，为尚未到达屏幕底部，距离300rpx时触发
• 如果取正数(如300)，为图片超出屏幕底部300rpx时触发

<u-lazy-load :image="image" threshold="300"></u-lazy-load>

API

Props

参数	说明	类型	默认值	可选值
index	用户自定义值，在事件触发时回调，用以区分是哪个图片	String | Number	-	-
image	图片路径	String	-	-
loading-img	预加载时的占位图	String	-	-
error-img	图片加载出错时的占位图	String	-	-
threshold	触发加载时的位置，见上方说明，单位 rpx	String	100	-
duration	图片加载成功时，淡入淡出时间，单位ms	String | Number	500	-
effect	图片加载成功时，淡入淡出的css动画效果	String	ease-in-out	linear / ease / ease-in / ease-out
is-effect	图片加载成功时，是否启用淡入淡出效果	Boolean	true	false
border-radius	图片圆角值，单位rpx	String | Number	0	-
height	图片高度，注意：实际高度可能受img-mode参数影响	String | Number	450	-
img-mode	图片的裁剪模式，详见image组件裁剪模式

(opens new window)

String | Number

widthFix

-

Events

事件名	说明	回调参数	版本
click	点击图片时触发	index：用户通过props传递的index值	-
load	图片加载成功时触发	index：用户通过props传递的index值	-
error	图片加载失败时触发	index：用户通过props传递的index值	-

Gap 间隔槽

该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

直接引入即可使用

• 通过height配置高度，单位rpx
• 通过bg-color配置背景颜色

<u-gap height="80" bg-color="#bbb"></u-gap>

API

Props

参数	说明	类型	默认值	可选值
bg-color	背景颜色	String	transparent(背景透明)	-
height	间隔槽高度，单位rpx	String | Number	30	-
margin-top	与前一个元素的距离，单位rpx	String | Number	0	-
margin-bottom	与后一个元素的距离，单位rpx	String | Number	0	-

Avatar 头像

本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过src指定头像的路径即可简单使用，如果传递了text参数，text将会优先起作用

注意： 请保证传递给src的是绝对地址，而不是相对地址，为什么呢？因为传入avatar组件的相对地址，是相对于组件的，而不是父组件(页面)，所以相对址可能会出错。

<template>
	<u-avatar :src="src" mode="circle"></u-avatar>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
			}
		}
	}
</script>

头像类型

• mode参数指定头像的类型，取值circle为圆形，取值square为圆角方形

<template>
	<u-avatar :src="src" mode="circle"></u-avatar>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
			}
		}
	}
</script>

默认头像

如果头像加载失败，导致加载图片失败，将会显示一个默认的灰色头像

API

Props

参数	说明	类型	默认值	可选值
bg-color	背景颜色，一般显示文字时用	String	#ffffff	-
src	头像路径，如加载失败，将会显示默认头像	String	-	-
size	头像尺寸，可以为指定字符串(large, default, mini)，或者数值，单位rpx	String | Number	default	-
mode	显示类型，见上方说明	String	circle	square
text	用文字替代图片，级别优先于src	String	-	-
img-mode	头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值	String	aspectFill	-
show-sex 1.5.6	是否显示右上角的性别图标	Boolean	false	true
sex-icon 1.5.6	右上角性别图标，可传入图片路径，或内置图标名	String	man	woman
sex-bg-color 1.5.6	性别图标的背景颜色	String	man-primary主题，woman-error主题	-
show-level 1.5.6	是否显示右下角的等级图标	Boolean	false	true
level-icon 1.5.6	右下角等级图标，可传入图片路径，或内置图标名	String	level	-
level-bg-color 1.5.6	等级图标的背景颜色	String	warning主题	-

Event

事件名	说明	回调参数
click	头像被点击	index: 用户传递的标识符

 

Loading 加载动画

此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过mode设定动画的类型，circle为圆圈的形状，flower为经典类似花朵的形状

<template>
	<view>
		<u-loading mode="circle"></u-loading>
		<u-loading mode="flower"></u-loading>
	</view>
</template>

动画颜色

color可以指定动画活动区域的颜色

<u-loading color="red"></u-loading>

动画尺寸

通过size设定尺寸，单位rpx，组件内把size值体现为组件的宽和高

<u-loading size="36"></u-loading>

显示或隐藏动画

通过show设置为true或false，来显示或隐藏动画

<u-loading :show="true"></u-loading>

/* 等价于 */
<u-loading show></u-loading>

API

Props

参数	说明	类型	默认值	可选值
mode	模式选择，见上方说明	String	circle	flower
color	动画活动区域的颜色，只对 mode = circle 模式有效	String	#c7c7c7	-
size	加载图标的大小，单位rpx	String | Number	34	-
show	是否显示动画	Boolean	true	false

亲爱的朋友作者整理不易，一键三联，评论，点赞转发哦！！！