uniapp-form表单（3）--- slider、switch、textarea

文章目录

• • slider滑动选择器
  • switch开关选择器
  • textarea多行输入框

文章内容

一、slider滑动选择器

属性说明

属性名	类型	默认值	说明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步长，取值必须大于 0，并且可被(max - min)整除
disabled	Boolean	false	是否禁用
value	Number	0	当前取值
activeColor	Color	各个平台不同，详见下	滑块左侧已选择部分的线条颜色
backgroundColor	Color	#e9e9e9	滑块右侧背景条的颜色
block-size	Number	28	滑块的大小，取值范围为 12 - 28
block-color	Color	#ffffff	滑块的颜色
show-value	Boolean	false	是否显示当前 value
@change	EventHandle		完成一次拖动后触发的事件，event.detail = {value: value}
@changing	EventHandle		拖动过程中触发的事件，event.detail = {value: value}

 使用方法

<template>
	<view class="content">
		<view class="box">
			<view class="text"> slider滑动选择器。 </view>
			<slider step="5" show-value="true"></slider>
			<slider min="1" max="10" value="5" show-value="true"></slider>
			<slider min="1" max="100" value="5" block-size="12" show-value="true"></slider>
			<slider value="50" block-size="12" active-color="yellow" backgroundColor="black" show-value="true" @change="bindsliderchange"></slider>
			<slider value="50" block-size="12" disabled active-color="yellow" backgroundColor="black" show-value="true"></slider>
		<view class="num">
			num:{{num}}
		</view>    
		</view>
		
		
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
				choose:'',
				aaa:`color: red;font-size: .5rem;`
			}
		},
		methods: {
			bindsliderchange(e){
				this.num = e.detail.value
				console.log(this.num);
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
	}

	.box {
		width: 90%;
		height: 500rpx;
		background-color: white;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.text {
		background-color: antiquewhite;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
	}
</style>

二、switch开关选择器

属性说明

属性名	类型	默认值	说明	平台差异说明
checked	Boolean	false	是否选中
disabled	Boolean	false	是否禁用	抖音小程序与飞书小程序不支持
type	String	switch	样式，有效值：switch, checkbox
color	Color		switch 的颜色，同 css 的 color
@change	EventHandle		checked 改变时触发 change 事件，event.detail={ value:checked}

使用方法

<template>
	<view class="content">
		<view class="box">
			<view class="text">switch开关选择器</view>
				<switch checked="true" @change="bindswitchchange" />
				<view v-if="choose===true">
					<text>打开了按钮</text>
				</view>
				<view v-else-if="choose===false">
					<text>关闭了按钮</text>
				</view>
			{{choose}}
			<view>
				<switch checked="true" color="pink"  type="checkbox"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
				choose:'',
				aaa:`color: red;font-size: .5rem;`
			}
		},
		methods: {
			bindswitchchange(e){
				this.choose=e.detail.value
				console.log(this.choose);
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
	}

	.box {
		width: 90%;
		height: 500rpx;
		background-color: white;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.text {
		background-color: antiquewhite;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
	}
</style>

三、textarea多行输入框

属性说明

属性名	类型	默认值	说明	平台差异说明
value	String		输入框的内容
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	textarea-placeholder	指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/	抖音小程序、飞书小程序、快手小程序不支持
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
focus	Boolean	false	获取焦点	在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
auto-focus	Boolean	false	自动聚焦，拉起键盘	京东小程序
auto-height	Boolean	false	是否自动增高，设置auto-height时，style.height不生效
fixed	Boolean	false	如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true	微信小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	App、微信小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序
cursor	Number		指定focus时的光标位置	微信小程序、App、H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、京东小程序
......	......	......	......	......

 查看更多属性：textarea | uni-app官网 (dcloud.net.cn)

使用方法

<template>
	<view class="content">
		<view class="box">
			<view class="text">textarea多行输入框</view>
				<textarea class="textarea"></textarea>
			<textarea class="textarea" maxlength="10" :placeholder-style="aaa" placeholder="请输入的爱好"></textarea>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
				choose:'',
				aaa:`color: red;font-size: .5rem;`
			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		width: 100%;
	}

	.box {
		width: 90%;
		height: 500rpx;
		background-color: white;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.text {
		background-color: antiquewhite;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
	}
	.textarea{
		width: 90%;
		height: 100rpx;
		border: 2px solid red;
		margin: 0 auto;
		margin-bottom: 15px;
		margin-top: 10px;
	}
</style>

小结

每一个组件都有它独特的特点，在项目中，选着适合的组件可以提高页面的可读性，以及美化性