uni-app 常用组件实战

view

视图容器

文档地址

用于包裹其他组件

scroll-view

可滚动视图区域，使用时需要添加一个固定的高度。

文档地址

• 用于包裹其他组件，且在该区域内可以滑动。

• 允许横向，纵向滑动。

• 如果是页面需要实现上拉加载、下拉刷新，推荐使用 页面的滑动加载和下拉刷新

缺陷和使用注意

• 适配问题：请勿在 scroll-view 中使用 canvas、textarea、map、video 等原生组件
• scroll-view 不适合放长列表，有性能问题
• scroll-view 会和原生下拉刷新造成冲突

swiper

滑块视图容器。一般用于左右滑动或上下滑动。案例：banner 轮播图，简单列表左右滑动

文档地址

banner轮播图 和 可拖动的顶部选项卡，可直接使用插件市场提供的库

text

文本

文档地址

selectable 属性表示是否可复制。

text组件只支持嵌套text组件，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异

<template>
    <view>
        <text> hello </text>
    </view>
</template>

icon

图标，H5 不支持，但是可通过 字体图标 来适配

文档地址

不常用，可使用 image 组件实现

<template>
    <view class="item" v-for="(value,index) in iconType" :key="index">
        <icon :type="value" size="26"/>
        <text>{{value}}</text>
    </view>
</template>


export default {
    data() {
        return {
            iconType: ['success']
        }
    },
    onLoad() {
        // #ifdef APP-PLUS|| MP-WEIXIN
        this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
        // #endif
        // #ifdef MP-ALIPAY
        this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
        // #endif
        // #ifdef MP-BAIDU
        this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
        // #endif
    }
}

button

按钮

文档地址

可对接小程序的 开发能力，如：获取用户信息，分享，打开意见反馈

<template>
    <view>
        <button type="primary">页面主操作 Normal</button>
    </view>
</template>

image

展示图片

文档地址

<template>
    <view class="page">
        <view class="image-list">
            <view class="image-item" v-for="(item,index) in array" :key="index">
                <view class="image-content">
                    <image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
                        @error="imageError"></image>
                </view>
                <view class="image-title">{{item.text}}</view>
            </view>
        </view>
    </view>
</template>

export default {
    data() {
        return {
            array: [{
                mode: 'scaleToFill',
                text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
            }, {
                mode: 'aspectFit',
                text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
            }, {
                mode: 'aspectFill',
                text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
            }],
            src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
        }
    },
    methods: {
        imageError: function(e) {
            console.error('image发生error事件，携带值为' + e.detail.errMsg)
        }
    }
}

input

单行输入框，类似于Android的EditText

文档地址

<template>
	<view class="uni-form-item uni-column">
		<view class="title">实时获取输入值：{{inputValue}}</view>
		<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
	</view>
</template>

export default {
    data() {
        return {
            inputValue: '',
        }
    },
    methods: {
        onKeyInput: function(event) {
            this.inputValue = event.target.value
        },
    }
}

textarea

多行输入框

文档地址

<template>
	<view class="uni-textarea">
		<textarea @blur="bindTextAreaBlur" auto-height />
	</view>
</template>


export default {
    data() {
        return {}
    },
    methods: {
        bindTextAreaBlur: function (e) {
            console.log(e.detail.value)
        }
    }
}

rich-text

富文本

文档地址

简单例子

<template>
	<view class="content">
		<rich-text class="richText" :nodes="content"></rich-text>
	</view>
</template>

export default {
	data() {
		return {
			content: "<p>大家都知道我对中国楼市一直是很乐观，坚定看好未来的房价走势。<br/></p>
						<p>最后送给大家一句我很喜欢的话，用作共勉：<br/></p>
						<p>坚持下去,并不是我们真的足够坚强，而是我们别无选择。</p><p>——丘吉尔</p>
					"
		}
	},
	methods: {
	}
}

progress

进度条

文档地址

简单例子

<template>
	<view class="progress-box">
		<progress percent="20" show-info stroke-width="3" />
	</view>
</template>