uni-app 常用组件实战

view

视图容器

文档地址

用于包裹其他组件

scroll-view

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

文档地址

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

• 允许横向，纵向滑动。

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

缺陷和使用注意

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

swiper

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

文档地址

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

text

文本

文档地址

selectable 属性表示是否可复制。

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

icon

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

文档地址

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

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

按钮

文档地址

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

image

展示图片

文档地址

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

文档地址

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

textarea

多行输入框

文档地址