uni-app 基础组件

视图容器：

uni-app组件官网快递

• view ： 相当于web‘中的div
  
• scroll-view:滚动视图

<template>
	<view>
		<scroll-view class="scv" scroll-x="true">
			<view>1</view>
			<view>1</view>
			<view>1</view>
			<view>1</view>
			<view>1</view>
			<view>1</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

<style>
	scroll-view{
		display: flex;
	}
	.scv{
		width: 90%;
		margin: 0 auto;
		background-color: #007AFF;
		flex-wrap: nowrap; //不换行
		white-space: nowrap;//不换行
	}
	.scv view{
		width: 50%;
		background-color: #4CD964;
		height: 200px;
		display: inline-block;
	}
</style>

相关的事件可以在文章开头点击链接查看

• swiper 滑块视图，可以做轮播图：

<template>
	<view>
		<swiper autoplay="true" indicator-dots="true" >
			<swiper-item>
				1
			</swiper-item>
			<swiper-item>
				2
			</swiper-item>
			<swiper-item>
				3
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

<style>
	
</style>

表单组件

• button
  属性：
• size 按钮大小
• type 按钮类型
• plain 按钮是否镂空，背景颜色透明
• disable 是否禁用
• loading 是否带有loading图标
• from-type 用于 <from> 组件，点击触发submit 或者reset事件
• open-type 微信开发能力
• hover-class 按钮按下去的样式
• hover-start-time 按住后多久出现点击状态，毫秒
• hover-stay-time 手指松开后点击状态保留时间，毫秒

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <button type="primary">页面主操作 Normal</button>
            <button type="primary" loading="true">页面主操作 Loading</button>
            <button type="primary" disabled="true">页面主操作 Disabled</button>
            <button type="default">页面次要操作 Normal</button>
            <button type="default" disabled="true">页面次要操作 Disabled</button>
            <button type="warn">警告类操作 Normal</button>
            <button type="warn" disabled="true">警告类操作 Disabled</button>
            <view class="button-sp-area">
                <button type="primary" plain="true">按钮</button>
                <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
                <button type="default" plain="true">按钮</button>
                <button type="default" disabled="true" plain="true">按钮</button>
                <button class="mini-btn" type="primary" size="mini">按钮</button>
                <button class="mini-btn" type="default" size="mini">按钮</button>
                <button class="mini-btn" type="warn" size="mini">按钮</button>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

• checkbox 多选框
  其中有两个标签：
  checkbox-group
  用来放置多个checkbox，其属性有==@change==
  是一个触发事件
  checkbox
  是多选框的项目
  

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">默认样式</view>
            <view>
                <checkbox-group>
                    <label>
                        <checkbox value="cb" checked="true" />选中
                    </label>
                    <label>
                        <checkbox value="cb" />未选中
                    </label>
                </checkbox-group>
            </view>
            <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
            <view>
                <checkbox-group>
                    <label>
                        <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
                    </label>
                    <label>
                        <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
                    </label>
                </checkbox-group>
            </view>
        </view>

        <view class="uni-padding-wrap">
            <view class="uni-title uni-common-mt">
                推荐展示样式
                <text>\n使用 uni-list 布局</text>
            </view>
        </view>
        <view class="uni-list">
            <checkbox-group @change="checkboxChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
                    <view>
                        <checkbox :value="item.value" :checked="item.checked" />
                    </view>
                    <view>{{item.name}}</view>
                </label>
            </checkbox-group>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'checkbox 复选框',
                items: [{
                        value: 'USA',
                        name: '美国'
                    },
                    {
                        value: 'CHN',
                        name: '中国',
                        checked: 'true'
                    },
                    {
                        value: 'BRA',
                        name: '巴西'
                    },
                    {
                        value: 'JPN',
                        name: '日本'
                    },
                    {
                        value: 'ENG',
                        name: '英国'
                    },
                    {
                        value: 'FRA',
                        name: '法国'
                    }
                ]
            }
        },
        methods: {
            checkboxChange: function (e) {
                var items = this.items,
                    values = e.detail.value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    const item = items[i]
                    if(values.includes(item.value)){
                        this.$set(item,'checked',true)
                    }else{
                        this.$set(item,'checked',false)
                    }
                }
            }
        }
    }
</script>

<style>
.uni-list-cell {
    justify-content: flex-start
}
</style>

• input 输入框
• lable 标签
• picker
  从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

<template>
    <view>
		<picker :range="year" @change="select">
			<view>点击显示年份</view>
			<view>{{selectyear}}</view>
		</picker>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				selectyear:'',
				year:['1999','2000','2001']
              }
        },
        methods: {
			select(e){
				this.selectyear = this.year[e.detail.value] 
			}
        }
 }
</script>

<style>
.uni-list-cell {
    justify-content: flex-start
}
</style>