uni-app组件

一、什么是组件：

组件是视图层的基本组成单元。
一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。
注意：
1、所有组件与属性名都是小写，单词之间以连字符-连接。
2、根节点为<template>,这个<template> 下只能且必须有一个根<view>组件。这是vue单文件组件规范。

二、组件/标签的变化

div 改成 view
span、font 改成 text
a 改成 navigator
img 改成 image
input 还在，但type属性改成了confirmtype
form、button、checkbox、label、textarea、canvas、video 这些还在。
select 改成 picker
iframe 改成 web-view
ul、li没有了，都用view替代
表单元素 radio 用 radio-group 组件进行代替
audio 不再推荐使用，改成api方式，背景音频api文档
其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。

新增组件：

scroll-view 可区域滚动视图容器
swiper 可滑动区域视图容器
icon 图标
rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
progress 进度条
slider 滑块指示器
switch 开关选择器
camera 相机
live-player 直播
map 地图
cover-view 可覆盖原生组件的视图容器

三、基础组件

视图容器

1、view	视图容器，类似于HTML中的div
2、scroll-view	可滚动视图容器
3、swiper	滑块视图容器

基础内容

4、icon	图标
5、text	文字
6、rich-text	富文本
7、progress	进度条

表单组件

8、button	按钮
9、form	表单
10、input	输入框
11、checkbox	多项选择器
12、radio	单项选择器
13、picker	弹出式列表选择器
14、picker-view	窗体内嵌式列表选择器
15、slider	滑动选择器
16、switch	开关选择器
17、label	标签

导航

18、navigator	页面链接。类似于HTML中的a标签

媒体组件

19、audio	音频
20、camera	相机
21、image	图片
22、video	视频
23、live-player	直播播放
24、live-pusher	实时音视频录制，也称直播推流

地图

25、map	地图

画布

26、canvas	画布

浏览器组件

27、web-view	web浏览器组件

四、组件介绍

swiper
滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图，注意是滑动切换而不是滚动。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

<swiper>
		<swiper-item indicator-dots="true" autoplay="true" interval="1500"><image src="../../static/logo.png" @change="test"></image></swiper-item>
		<swiper-item indicator-dots="true" autoplay="true" interval="1500"><image src="../../static/logo.png"></image></swiper-item>
		<swiper-item indicator-dots="true" autoplay="true" interval="1500"><image src="../../static/logo.png"></image></swiper-item>
</swiper>

test方法：

methods:{
			test(){
				console.log("run")//每滚动一次，执行一次
			}
		}

swiper其他属性说明：详情
scroll-view
可滚动视图区域
横向滑动：

<view>
			<scroll-view scroll-x="true" style="white-space: nowrap;"><!-- 超出位置不换行 -->
					<view id="demo1" style="display:inline-block;width:200px;height:100px;background: red;">A</view>
					<view id="demo2" style="display:inline-block;width:200px;height:100px;background: yellow;">B</view>
					<view id="demo3" style="display:inline-block;width:200px;height:100px;background: blue;">C</view>
			</scroll-view>
		</view>

点击跳转特效：

<view class="ld">
	<view class="left">
		<view v-for="(item,index) in list" :key="index" @click="setId(index)">
			{{item.title}}<!-- 点击左侧栏 右侧栏跳出 -->
		</view>
	</view>
	<view class="right">
		<scroll-view 
		scroll-y="true" 
		style="white-space: nowrap;height:200px;"
		:scroll-into-view="clickId"
		scroll-with-animation
		><!-- scroll-into-view值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 -->
		<!-- scroll-with-animation在设置滚动条位置时使用动画过渡 -->
			<view v-for="(item,index) in list" :key="index">
				<view class="title" :id="'po'+index">{{item.title}}</view>
				<view v-for="(it,idx) in item.list" :key="idx">
					{{it}}
				</view>
			</view>
		</scroll-view>
	</view>
</view>

script中代码段：

data() {
	return {
		list:[
			{title:"中餐",list:["盖饭","扒饭","咖喱饭","鸡排饭"]},
			{title:"西餐",list:["牛排","意面","芝士","汉堡"]},
			{title:"法餐",list:["辣子鸡丁","xxx","肥宅快乐水","yyy"]},
			{title:"快餐",list:["薯条","饮料","粥","丸子"]}
		],
		clickId:""
	};
},
methods:{
	setId(index){
		this.clickId="po"+index;
	}
}

相关css（可修改样式）：

.title{
	font-size: 20px;
	font-weight: bold;
	background: pink;
}
.ld{
	display: flex;
	.left{
		width: 100px;
		border: 1px solid red;
	}
	.right{
		flex:1;
	}
}