uni-app 基础组件

1.视图容器

• view
• scroll-view：可滚动视图区域

<template>
    <view>
        <view>
            <scroll-view class="scv" scroll-x="true">
                <view>1</view>
                <view>2</view>
                <view>3</view>
                <view>4</view>
                <view>5</view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    var _self;
    export default{
        data(){
            return{
                
                
            }
        },
        onLoad() {
            _self=this;
        }
    }
</script>

<style>
scroll-view{
    display: flex;
}
.scv{
    width: 90%;
    margin:0 auto;
    background: #8F8F94;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.scv view{
    width: 50%;
    height: 200px;
    background: #FF0000;
    display: inline-block;
}

</style>

• swiper：滑块视图容器（常用于轮播图等）

<template>
    <view >
        <!-- 轮播图 -->
        <swiper indicator-dots="true" autoplay="true" >
            <swiper-item>1
                <image src="/static/logo.png"></image>
            </swiper-item>
            <swiper-item>2</swiper-item>
            <swiper-item>3</swiper-item>
        </swiper>
        
    </view>
</template>

<script>
    export default {
        data() {
            return{
                title:'hello2...',
                title1:'ddddd'
            }
        }
    }
</script>

<style>
swiper-item{
    background: #00FF00;
    height: 200px;
    width: 100%;
}
</style>

2.基础内容

• text：文本

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选	App、H5
user-select	Boolean	false	文本是否可选	微信小程序
space	String		显示连续空格	App、H5、微信小程序
decode	Boolean	false	是否解码	App、H5、微信小程序

• rich-text: 富文本

属性名	类型	默认值	说明	平台兼容
nodes	Array / String	[]	节点列表 / HTML String
space	string		显示连续空格	微信基础库2.4.1+、QQ小程序
selectable	Boolean	false	富文本是否可以长按选中，可用于复制，粘贴等场景	百度小程序（真机）

<template>
    <view class="content">
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap">
            <view class="uni-title uni-common-mt">
                数组类型
                <text>\nnodes属性为Array</text>
            </view>
            <view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
                <rich-text :nodes="nodes"></rich-text>
            </view>
            <view class="uni-title uni-common-mt">
                字符串类型
                <text>\nnodes属性为String</text>
            </view>
            <view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
                <rich-text :nodes="strings"></rich-text>
            </view>
        </view>
    </view>
</template>


<script>
    var _self;
    export default {
        data() {
            return {
                nodes: [{
                    name: 'div',
                    attrs: {
                        class: 'div-class',
                        style: 'line-height: 60px; color: red; text-align:center;'
                    },
                    children: [{
                        type: 'text',
                        text: 'Hello&nbsp;uni-app!'
                    }]
                }],
                strings: '<div style="text-align:center;"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png"/></div>'
            }
        }
    }
</script>

<style>


</style>

 

 progress：进度条

<template>
    <view >
        <progress percent="20" show-info stroke-width="3" />
        <progress percent="40" active stroke-width="3" />
        <progress percent="60" active stroke-width="3" backgroundColor="#999"/>
        <progress percent="80" activeColor="red" active stroke-width="8" />           
    </view>
</template>


<script>
    var _self;
    export default {
        data() {
            return {
     
              
            }
        }
    }
</script>

<style>


</style>