uniapp中的picker选择器的几种使用场景

目录
  • 一、普通选择器
  • 二、多列选择器
  • 三、时间选择器
  • 四、日期选择器

一、普通选择器

<template>
	<view>
		<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
			<view style="padding: 20rpx;background-color: white;">{{ array[index].name }}</view>
		</picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			array: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }],
			index: 2,
		};
	},
	methods: {
		bindPickerChange: function(e) {
			this.index = e.detail.value;
		}
	}
};
</script>

二、多列选择器

<template>
	<view>
		<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
			<view style="background-color: white;">
				{{ multiArray[0][multiIndex[0]] }},
				{{ multiArray[1][multiIndex[1]] }},
				{{ multiArray[2][multiIndex[2]] }}
			</view>
		</picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			multiArray: [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']],
			multiIndex: [0, 0, 0]
		};
	},
	methods: {
		bindMultiPickerColumnChange: function(e) {
			this.multiIndex[e.detail.column] = e.detail.value;
			switch (e.detail.column) {
				case 0: //拖动第1列
					switch (this.multiIndex[0]) {
						case 0:
							this.multiArray[1] = ['中国', '日本'];
							this.multiArray[2] = ['北京', '上海', '广州'];
							break;
						case 1:
							this.multiArray[1] = ['英国', '法国'];
							this.multiArray[2] = ['伦敦', '曼彻斯特'];
							break;
					}
					this.multiIndex.splice(1, 1, 0);
					this.multiIndex.splice(2, 1, 0);
					break;
				case 1: //拖动第2列
					switch (
						this.multiIndex[0] //判断第一列是什么
					) {
						case 0:
							switch (this.multiIndex[1]) {
								case 0:
									this.multiArray[2] = ['北京', '上海', '广州'];
									break;
								case 1:
									this.multiArray[2] = ['东京', '北海道'];
									break;
							}
							break;
						case 1:
							switch (this.multiIndex[1]) {
								case 0:
									this.multiArray[2] = ['伦敦', '曼彻斯特'];
									break;
								case 1:
									this.multiArray[2] = ['巴黎', '马赛'];
									break;
							}
							break;
					}
					this.multiIndex.splice(2, 1, 0);
					break;
			}
			this.$forceUpdate();
		}
	}
};
</script>

三、时间选择器

<template>
	<view>
		<picker mode="time" :value="time" :start="minTime" :end=maxTime @change="bindTimeChange">
			<view style="background-color: white;">{{ time }}</view>
		</picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			time: '12:01',
			minTime:'09:01',
			maxTime:"21:01"
		};
	},
	methods: {
		bindTimeChange: function(e) {
			this.time = e.detail.value;
		}
	}
};
</script>

四、日期选择器

<template>
	<view>
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view style="background-color: #07C160;">{{ date }}</view>
		</picker>
	</view>
</template>
<script>
function getDate(type) {
	const date = new Date();

	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();

	if (type === 'start') {
		year = year - 10;
	} else if (type === 'end') {
		year = year + 10;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day}`;
}
export default {
	data() {
		return {
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
		};
	},
	methods: {
		bindDateChange: function(e) {
			this.date = e.detail.value;
		}
	}
};
</script>

到此这篇关于uniapp中的picker选择器的几种使用场景的文章就介绍到这了,更多相关uniapp picker选择器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • uniapp实现日期时间选择器

    本文实例为大家分享了uniapp实现日期时间选择器的具体代码,供大家参考,具体内容如下 由于项目需求需要,尝试过使用Vant组件库,但是一直出现问题,插件市场的插件又不太符合需求,使用就查了相关资料,最终捣鼓的效果如下: 首先现在根目录下创建util文件夹放dateTimePicker.js dateTimePicker.js function withData(param){ return param < 10 ? '0' + param : '' + param; } function ge

  • uniapp中的picker选择器的几种使用场景

    目录 一.普通选择器 二.多列选择器 三.时间选择器 四.日期选择器 一.普通选择器 <template> <view> <picker @change="bindPickerChange" :value="index" :range="array" range-key="name"> <view style="padding: 20rpx;background-color:

  • uniapp中常用的几种提示弹框

    目录 一.成功提示弹框 二.加载提示弹框 三.确认取消提示框 四.列表选择提示弹框 五.自定义图标 总结 一.成功提示弹框 在执行增.删.改.查等提交成功后弹出提示. uni.showToast({ title: '成功提示', //将值设置为 success 或者直接不用写icon这个参数 icon: 'success', //显示持续时间为 2秒 duration: 2000 }) 效果如下: 若icon参数值设置为none,将不显示“√”图标,只显示文字提示. uni.showToast(

  • 微信小程序实现自定义picker选择器弹窗内容

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialo

  • 详解uni-app中的样式

    目录 uni-app中的样式 总结 uni-app中的样式 sass插件需要在官网下载,按提示操作即可 rpx 即响应式px,一种根据屏幕宽度自适应的动态单位.以750宽的屏幕为基准,750rpx恰好为屏幕宽度.屏幕变宽,rpx 实际显示效果会等比放大. 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束 定义在 App.vue 中的样式为全局样式,作用于每一个页面.在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在

  • 微信小程序自定义时间段picker选择器

    本文实例为大家分享了微信小程序自定义时间段picker选择器的具体代码,供大家参考,具体内容如下 想实现一个可以选择年份和时间段的日期选择器,如下所示 微信小程序自带的picker组件虽然能实现如上的内容,但不能实现样式的修改,不太符合小程序的设计主题,所以考虑了以下两种方法来实现如上的设计. 1.自定义date-picker 把要实现的date-picker封装为一个组件,组件内套用小程序自带的picker-view组件,其中picker_view-column表示不同的选择列,这样可以方便地

  • weui中的picker使用js进行动态绑定数据问题

    解决方案; picker和Select组件是通过input标签绑定,可以先通过input的父级元素移除input标签,重新插入input标签,最后重新初始化picker或Select组件. <div class="weui-cell"> <div class="weui-cell__hd"><label for="time-format" class="weui-label">性别</

  • uni-app如何页面传参数的几种方法总结

    uni.$emit(eventName,OBJECT) 触发全局的自定事件.附加参数都会传给监听器回调. 其中eventName为事件名,OBJECT为触发事件附加参数 示例代码如下: uni.$emit('update',{msg:'页面更新'}) uni.$on(eventName,callback) 监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数. eventName为事件名,callback为事件的回调函数. 示例代码如下: uni.$on('updat

  • element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)

    项目需求是:选择日期和时间,只能选择当前时间以后的时间,禁用最小级别到分钟. 有两种选择 1.使用DateTimePicker 日期时间选择器. 2.DatePicker 和 TimePicker 组合使用 这里我是用的是第二种方法,最主要的属性是picker-options <el-date-picker v-model="formInline.inventoryDate" type="date" align="right" placeh

  • 在uni-app中使用element-ui的方法与报错解决

    uni-app的相关UI组件库中可能会没有你想要的功能组件,自己去开发的话需要花很多时间,此时咱们可以将别的UI组件库给安装到uni-app中来,达到直接使用该UI组件库的功能组件,例如,安装element-ui uni-app使用element-ui需安装以下插件 npm i element-ui -S 按需引入组件需要装以下插件 npm install babel-plugin-component -D 当你安装完以上插件后,需要在main.js中进行引入,例如引入全部: import Vu

随机推荐