uniapp的组件 - 技术栈

内置组件

icon --- 图标

html 复制代码

<icon :type="contact" size="26"/>

text --- 文本

html 复制代码

<view class="text-box" scroll-y="true">
	<text>{{text}}</text>
</view>

progress --- 进度条

html 复制代码

<view class="progress-box">
	<progress :percent="pgList[0]" show-info stroke-width="3" />
</view>

button --- 按钮

html 复制代码

<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="warn">警告类操作 Normal</button>

<button type="primary" plain="true">按钮</button>
<button class="mini-btn" type="primary" size="mini">按钮</button>

checkbox --- 复选框

html 复制代码

<view>
	<checkbox-group>
		<label>
			<checkbox value="cb" :checked="true" />选中
		</label>
		<label>
			<checkbox value="cb" />未选中
		</label>
	</checkbox-group>
</view>

editor --- 文本编辑器

富文本编辑器，可以对图片、文字格式进行编辑和混排

html 复制代码

<view class="editor-wrapper">
	<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
						show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
	</editor>
</view>

input --- 单行输入框

html 复制代码

<view class="uni-form-item uni-column">
	<view class="title">可自动聚焦的input</view>
	<input class="uni-input" focus placeholder="自动获得焦点" />
</view>

picker --- 选择器

html 复制代码

<view>
	<view class="uni-title uni-common-pl">地区选择器</view>
	<view class="uni-list">
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">
				当前选择
			</view>
			<view class="uni-list-cell-db">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
			</view>
		</view>
	</view>

	<view class="uni-title uni-common-pl">时间选择器</view>
	<view class="uni-list">
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">
				当前选择
			</view>
			<view class="uni-list-cell-db">
				<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
					<view class="uni-input">{{time}}</view>
				</picker>
			</view>
		</view>
	</view>

	<view class="uni-title uni-common-pl">日期选择器</view>
	<view class="uni-list">
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">
				当前选择
			</view>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
		</view>
	</view>

</view>

switch --- 开关

html 复制代码

<view class="uni-list">
	<view class="uni-list-cell uni-list-cell-pd">
		<view class="uni-list-cell-db">开启中</view>
		<switch checked />
	</view>
	<view class="uni-list-cell uni-list-cell-pd">
		<view class="uni-list-cell-db">关闭</view>
		<switch />
	</view>
</view>

image --- 图片

html 复制代码

<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"></image>

video --- 视频

html 复制代码

<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>

danmu弹幕相关

swiper --- 轮播图

html 复制代码

<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
		<swiper-item>
			<view class="swiper-item uni-bg-red">A</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-green">B</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-blue">C</view>
		</swiper-item>
	</swiper>
</view>

扩展组件

uni-icons --- 图标

html 复制代码

<uni-icons type="contact" size="30"></uni-icons>