uni-app提供了一套基础组件，类似HTML里的标签元素，不推荐在uni-app中使用使用div等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>
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>
: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 数组。这里暂不做详细说明。大家可网上找下详细的示例。
版权归原作者 baozhengw 所有， 如有侵权，请联系我们删除。