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 Prophttps://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:"我是&lt;text&gt;&nbsp;    组件"

            }

        }

    }

</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 数组。这里暂不做详细说明。大家可网上找下详细的示例。