uni-app快速入门（八）--常用内置组件（上）
uni-app提供了一套基础组件，类似HTML里的标签元素，不推荐在uni-app中使用使用div等HTML标签。在uni-app中，对应<div>的标签是view，对应<span>的是text，对应<a>的是navigator，常用uni-app组件见nulluni-app,uniCloud,serverless,介绍,基本用法,对齐方式,表单校验,如何使用,校验规则说明,rules 属性说明,validateFunction 自定义校验规则使用说明,validateFunction 异步校验,动态表单校验,表单校验时机说明,API,Forms Prop
https://zh.uniapp.dcloud.io/component/uniui/uni-forms.html在官网中，uni-app 介绍了内置组件和扩展组件。
1、view组件
view为视图容器，类似html的div，用于包裹各种元素内容，是页面布局最常用的标签。
view组件和传统的div有一定的区别，div的演示和事件效果都是由css和javascript实现的，而
view组件支持css样式的同事自带事件效果属性。view组件有四个属性：
示例：
<view class="parent-box" hover-class="box-active">
<view class="box" hover-class="box-active" hover-start-time="3000" hover-stay- time="3000"
:hover-stop-propagation="true">微信小程序平台</view>
</view>
2、scroll-view组件
scroll-view（可滚动视图区域）用于区域滚动，类似 H5的iScrolll效果，使用非常广泛，如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载更多等。scroll-view的属性也非常多，较常用的有scroll-x、scroll-y、scroll-top、scroll-left、@scroll等。具体属性介绍见官方文档：
scroll-view | uni-app官网uni-app,uniCloud,serverless,scroll-view,属性说明,示例,自定义下拉刷新,webview中使用scroll-view的注意,其他注意事项https://zh.uniapp.dcloud.io/component/scroll-view.html这么都属性可能不太好记，大家可以在项目实际开发时根据实际需要再详细了解不同的属性。
3、swiper组件
swiper滑块视图容器组件的最常用功能就是制作轮播图效果，一般用于左右滑动或上下滑动，和上面的滚动切换是有区别的，滑块切换是一屏一屏地切换，swiper下面的每个swiper-item都是一个滑动切换区域，不能停留在2个滑动切换区域之间，属性介绍参考官方文档：https://zh.uniapp.dcloud.io/component/swiper.htmluni-app,uniCloud,serverless,swiper,easing-function,swiper-itemhttps://zh.uniapp.dcloud.io/component/swiper.html
示例：
打开HBuilderX,让之前生成的Demo项目的pages/index/index.vue的内容替换下面的：
<template>
<view>
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" indicator-color="#000000" indicator-active-color="#0000FF">
<swiper-item v-for="(item,index) in images" :key="index">
<image :src="item.path"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
name: "swiper-component",
data() {
return {
images:[
{
path:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
},
{
path:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
},
{
path:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
}
]
}
}
}
</script>
<style scoped>
.swiper{width:100%;height:400rpx;}
.swiper image{width:100%;height:100%}
</style>
然后运行到小程序模拟器-微信开发者工具，运行效果：
4、movable-area和movable-view
movable-area是可拖动区域组件，movable-view是可移动视图组件，这2个组件搭配使用可实现在页面中拖动滑动或双指缩放功能。
movable-area指可拖动范围，在其中可内嵌movable-view用于指示可拖动区域，即手指或鼠标按住 movable-view托众或双指缩放，但拖不出movable-area规定的范围。
movable-area官方文档参考：
movable-area | uni-app官网uni-app,uniCloud,serverless,movable-areahttps://zh.uniapp.dcloud.io/component/movable-area.htmlmovable-view官方文档参考:
movable-view | uni-app官网uni-app,uniCloud,serverless,movable-viewhttps://zh.uniapp.dcloud.io/component/movable-view.html
5、text和rich-text组件
【text组件】
在uni-app中，纯文字建议用text组件包裹，以实现长按选择文字、连续空格、解码功能。rich-text富文本组件可解析HTML标签，通常用于显示商品介绍、文章内容等应用场景。
text组件属性介绍参考官方文档：
text组件 | uni-app官网uni-app,uniCloud,serverless,text组件,属性说明,子组件,Tips,示例https://zh.uniapp.dcloud.io/component/text.html页面示例：
<template>
<view>
<text :decode="true" space="nbsp" :selectable="true">{{text}}</text>
</view>
</template>
<script>
export default {
name: "text-component",
data(){
return {
text:"我是<text> 组件"
}
}
}
</script>
<style scoped>
</style>
:decode="true" 表示可将文本中的特殊字符解码成原始文本。
【rich-text组件】
rich-text组件支持部分HTML节点及属性。官方文档参考：
rich-text | uni-app官网uni-app,uniCloud,serverless,rich-texthttps://zh.uniapp.dcloud.io/component/rich-text.html rich-text的具体使用会比较复杂。其中nodes属性可绑定type为text的数组和type为node 数组。这里暂不做详细说明。大家可网上找下详细的示例。