uni-app 常用组件实战

女爷i 2022-10-02 09:58 276阅读 0赞

## view ##

> 视图容器
> 
> [文档地址][Link 1]

用于包裹其他组件

## scroll-view ##

> 可滚动视图区域，使用时需要添加一个固定的高度。
> 
> [文档地址][Link 2]

*  用于包裹其他组件，且在该区域内可以滑动。
 *  允许横向，纵向滑动。
 *  如果是页面需要实现上拉加载、下拉刷新，推荐使用 页面的滑动加载和下拉刷新

**缺陷和使用注意**

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

## swiper ##

> 滑块视图容器。一般用于左右滑动或上下滑动。案例：`banner` 轮播图，简单列表左右滑动
> 
> [文档地址][Link 3]

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

## text ##

> 文本
> 
> [文档地址][Link 5]

`selectable` 属性表示是否可复制。

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

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

## icon ##

> 图标，H5 不支持，但是可通过 [字体图标][Link 6] 来适配
> 
> [文档地址][Link 7]

不常用，可使用 `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 ##

> 按钮
> 
> [文档地址][Link 8]

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

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

## image ##

> 展示图片
> 
> [文档地址][Link 9]

<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`
> 
> [文档地址][Link 10]

<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 ##

> 多行输入框
> 
> [文档地址][Link 11]

<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 ##

> 富文本
> 
> [文档地址][Link 12]

简单例子

<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 ##

> 进度条
> 
> [文档地址][Link 13]

简单例子

[Link 1]: https://uniapp.dcloud.io/component/view
[Link 2]: https://uniapp.dcloud.io/component/scroll-view
[Link 3]: https://uniapp.dcloud.io/component/swiper
[banner]: https://ext.dcloud.net.cn/search?q=%E8%BD%AE%E6%92%AD
[Link 4]: https://ext.dcloud.net.cn/search?q=%E6%96%B0%E9%97%BB%E6%A8%A1%E6%9D%BF
[Link 5]: https://uniapp.dcloud.io/component/text
[Link 6]: https://uniapp.dcloud.io/frame?id=%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87
[Link 7]: https://uniapp.dcloud.io/component/icon
[Link 8]: https://uniapp.dcloud.io/component/button
[Link 9]: https://uniapp.dcloud.io/component/image
[Link 10]: https://uniapp.dcloud.io/component/input
[Link 11]: https://uniapp.dcloud.io/component/textarea
[Link 12]: https://uniapp.dcloud.io/component/rich-text
[Link 13]: https://uniapp.dcloud.io/component/progress