一、什么是组件:
组件是视图层的基本组成单元。
一个组件包括开始标签和结束标签,标签上可以写属性,并对属性赋值。内容则写在两个标签之内。
注意:
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;
}
}