uni-app之常用组件

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123

1.view相当于传统html的div

<view></view>

2.scroll-view区域滚动

scroll-top设置竖向滚动条位置

scroll-y允许纵向滚动 @scroll滚动时触发

<scroll-view></scroll-view>
<scroll-view scroll-top="0" scroll-y="true" class="scrollY" @scroll="scroll">
</scroll-view>

swiper滑块视图容器,适用于轮播图

circular是否采用衔接滑动，即播放到末尾后重新回到开头 默认false

indicator-dots是否显示面板指示点 默认false

autoplay是否自动切换 默认false

interval自动切换时间间隔 默认5000 duration滑动动画时长 默认500

<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="6000"
				duration="600">
				<swiper-item>
					<view class="">A</view>
				</swiper-item>
				<swiper-item>
					<view class="">B</view>
				</swiper-item>
				<swiper-item>
					<view class="">C</view>
				</swiper-item>
			</swiper>

4.text文本

<text>{{textname}}</text>

5.checkbox多选 checked="true"默认选中状态

<checkbox-group>
    <label>
        <checkbox value="checkbox" checked="true" color="#FFCC33" style="" />选中
    </label>
    <label>
        <checkbox value="checkbox" color="#FFCC33" style="" />未选中
    </label>
</checkbox-group>

6.form表单

@submit获取表单中数据

@reset清空表单

<form @submit="formSubmit" @reset="formReset">
</form>

7.input输入框

<input class="uniinput" @input="sssj" placeholder="获取输入数据" />

sssj: function(event) {
    this.inputValue = event.target.value
},

<input class="uniinput" type="number" placeholder="这是一个数字输入框" />

password会把密码隐藏
<input class="uniinput" password type="text" placeholder="这是一个密码输入框" />

8.laber文本

<laber></label>

9.picker滚动选择器

@change值改变获取值

@cancel取消选择

disabled 是否禁用 禁用后不可选择

<picker @change="pickerChange">
</picker>

10.radio单选

<radio value="x" checked="true" />选中
<radio value="w" />未选中

11.开关选择器

<switch checked @change="switchChange" />

12.textarea多行输入框

<textarea placeholder="内容"/>

13.navigator跳转

<navigator url="navigate/navigate?name=navigate">
</navigator>

14.audio音频

controls是否显示默认控件

<audio style="" controls></audio>

16.image图片 src图片地址

<image src="img/s.png"></image>

17.video

 <video id="myVideo" src="video/sp.mp4"controls></video>

18.map地图

latitude经度

latitude纬度

iconPath图标路径

<map></map>

19.画布

<canvas></canvas>

20.web-view嵌套html页面

<web-view src="https://a.com/static/web-view.html"></web-view>