view
视图容器 文档地址 https://uniapp.dcloud.io/component/view
用于包裹其他组件
scroll-view
可滚动视图区域,使用时需要添加一个固定的高度。 文档地址 https://uniapp.dcloud.io/component/scroll-view
● 用于包裹其他组件,且在该区域内可以滑动。
● 允许横向,纵向滑动。
● 如果是页面需要实现上拉加载、下拉刷新,推荐使用 页面的滑动加载和下拉刷新
缺陷和使用注意
● 适配问题:请勿在 scroll-view 中使用 canvas、textarea、map、video 等原生组件
● scroll-view 不适合放长列表,有性能问题
● scroll-view 会和原生下拉刷新造成冲突
swiper
滑块视图容器。一般用于左右滑动或上下滑动。案例:banner 轮播图,简单列表左右滑动 文档地址 https://uniapp.dcloud.io/component/swiper
banner轮播图 和 可拖动的顶部选项卡,可直接使用插件市场提供的库
text
文本 文档地址https://uniapp.dcloud.io/component/text
selectable 属性表示是否可复制。
text组件只支持嵌套text组件,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异
<template>
<view>
<text> hello </text>
</view>
</template>
icon
图标,H5 不支持,但是可通过 字体图标 来适配 文档地址 https://uniapp.dcloud.io/component/icon
不常用,可使用 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
按钮 文档地址 https://uniapp.dcloud.io/component/button
可对接小程序的 开发能力,如:获取用户信息,分享,打开意见反馈
<template>
<view>
<button type="primary">页面主操作 Normal</button>
</view>
</template>
image
展示图片 文档地址 https://uniapp.dcloud.io/component/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 文档地址 https://uniapp.dcloud.io/component/input
<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
多行输入框 文档地址 https://uniapp.dcloud.io/component/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
富文本 文档地址 https://uniapp.dcloud.io/component/textarea
简单例子
<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
进度条 文档地址 https://uniapp.dcloud.io/component/progress
简单例子
<template>
<view class="progress-box">
<progress percent="20" show-info stroke-width="3" />
</view>
</template>
© 著作权归作者所有
举报
发表评论
0/200