popup 弹窗 picker-view 滚动选择器

最新推荐文章于 2024-03-28 11:00:34 发布
最新推荐文章于 2024-03-28 11:00:34 发布
阅读量840 收藏 2
点赞数 1
分类专栏： uni-app 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/devilangelia/article/details/124313473
版权

popup 弹窗 picker-view 滚动选择器

组件链接: https://ext.dcloud.net.cn/plugin?id=7960

<m-picker mode="bottom" :show.sync="show" :range="list" @confirm="confirm" />

一、自定义popup类型的picker-view滚动选择器

  1. 组件是基于uniapp开发的，过度动画使用了uniapp的<uni-transition></uni-transition>组件

Mark 遮罩层

<uni-transition v-if="mark" ref="aniMark" custom-class="transition" mode-class="fade" :styles="stylesMark" :show="show" @click="clickMark" />

popup内容

<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show">
	<view class="m-picker">
		<view class="m-picker__case" :style="{
			background: bgColor,
			borderTopLeftRadius: radius[0] + 'rpx',
			borderTopRightRadius: radius[1] + 'rpx',
			borderBottomLeftRadius: radius[2] + 'rpx',
			borderBottomRightRadius: radius[3] + 'rpx',
			paddingBottom: model == 'bottom' ? 'calc(constant(safe-area-inset-bottom) + 30rpx)' : '30rpx',
			paddingBottom: model == 'bottom' ? 'calc(env(safe-area-inset-bottom) + 30rpx)' : '30rpx'
		}">
			<!-- 确认/取消 按钮 -->
			<slot v-if="model == 'bottom'" name="handle">
				<view class="handle">
					<view class="button cancel" :style="cancelStyle" @click="cancel">{{cancelText}}</view>
					<view class="button confirm" :style="confirmStyle" @click="confirm">{{confirmText}}</view>
				</view>
			</slot>
			<!-- 内容 -->
			<slot>
				
			</slot>
			<!-- 确认/取消 按钮 -->
			<slot v-if="model != 'bottom'" name="handle">
				<view class="handle">
					<view class="button cancel" :style="cancelStyle" @click="cancel">{{cancelText}}</view>
					<view class="button confirm" :style="confirmStyle" @click="confirm">{{confirmText}}</view>
				</view>
			</slot>
		</view>
	</view>
</uni-transition>

picker-view 组件

<view class="content" :style="{height: `${height}rpx`}">
	<picker-view class="picker-view" :indicator-class="indicatorClass" :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange" @pickstart="pickstart" @pickend="pickend">
		<picker-view-column v-for="(rangeItem, rangeIndex) in range" :key="rangeIndex">
			<view class="picker-view__item" v-for="(item, index) in rangeItem" :key="index">
				{{ item[rangeKey] }}
			</view>
		</picker-view-column>
	</picker-view>
</view>

props.js

const props = {
	// 是否显示遮罩
	mark: {
		type: Boolean,
		default() {
			return true
		}
	},
	// 点击遮罩是否关闭
	markClose: {
		type: Boolean,
		default() {
			return true
		}
	},
	// 点击按钮是否关闭
	btnClose: {
		type: Boolean,
		default() {
			return true
		}
	},
	// 是否显示弹窗
	show: {
		type: Boolean,
		default() {
			return false
		}
	},
	// 数据
	range: {
		type: Array,
		default: []
	},
	// picker-item显示内容的key
	rangeKey: {
		type: String,
		default: 'label'
	},
	// 设置选择器中间选中框的样式
	indicatorStyle: {
		type: String,
		default: 'height: 50px;'
	},
	// 设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
	indicatorClass: {
		type: String,
		default: ''
	},
	// cancel文字
	cancelText: {
		type: String,
		default: '取消'
	},
	// confirm文字
	confirmText: {
		type: String,
		default: '确定'
	},
	// cancel样式style
	cancelStyle: {
		type: Object,
		default: {}
	},
	// confirm样式style
	confirmStyle: {
		type: Object,
		default: {}
	},
	// 内容高度 rpx
	height: {
		type: Number,
		default: 500
	},
	// 圆角 rpx
	borderRadius: {
		type: Number,
		default: 16
	},
	// 背景颜色
	bgColor: {
		type: String,
		default: '#FFFFFF'
	},
	// mark 背景颜色
	markBgColor: {
		type: String,
		default: '#00000080'
	},
	// 方向 top/bottom/center
	mode: {
		type: String,
		default: 'bottom'
	}
}

export default props

接收样式参数

import props from './props.js'
export default {
	name:"m-picker",
	props,
	computed: {
		model() {
			if (this.mode == 'top') return 'top';
			else if (this.mode == 'bottom') return 'bottom';
			else if (this.mode == 'center') return 'center';
			else return 'bottom';
		},
		stylesMark() {
			return {
				position: 'fixed',
				top: 0,
				left: 0,
				right: 0,
				bottom: 0,
				zIndex: 99,
				backgroundColor: this.markBgColor,
			}
		},
		styles() {
			const top = {
				position: 'fixed',
				left: 0,
				right: 0,
				top: 0,
				zIndex: 100
			}
			const bottom = {
				position: 'fixed',
				left: 0,
				right: 0,
				bottom: 0,
				zIndex: 100
			}
			const center = {
				position: 'fixed',
				left: '50%',
				top: '50%',
				width: '90vw',
				transform: 'translate(-50%, -50%)',
				zIndex: 100
			}
			if (this.model == 'top') return top;
			else if (this.model == 'bottom') return bottom;
			else if (this.model == 'center') return center;
			else return bottom;
		},
		radius() {
			const borderRadius = this.borderRadius;
			if (this.model == 'top') return [0, 0, borderRadius, borderRadius];
			else if (this.model == 'bottom') return [borderRadius, borderRadius, 0, 0];
			else if (this.model == 'center') return [borderRadius, borderRadius, borderRadius, borderRadius];
			else return [0, 0, 0, 0];
		},
		modeClass() {
			if (this.model == 'top') return ['fade', 'slide-top'];
			else if (this.model == 'bottom') return ['fade', 'slide-bottom'];
			else if (this.model == 'center') return 'fade';
			else return ['fade', 'slide-bottom'];
		}
	},
}

二、组件说明

Methods

方法称名说明参数
confirm点击右侧按钮[]
cancel点击左侧按钮

字段

字段类型默认值说明
markBooleantrue是否显示遮罩
markCloseBooleantrue点击遮罩是否关闭
btnCloseBooleantrue点击按钮是否关闭
showBooleanfale是否显示弹窗
rangeArray[]数据
rangeKeyString‘label’picker-item显示内容的key
indicatorStyleString‘height: 50px;’设置选择器中间选中框的样式
indicatorClassString’ ’设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
cancelTextString取消cancel文字
confirmTextString确定confirm文字
cancelStyleObject{}cancel样式style
confirmlStyleObject{}confirm样式style
heightNumber500内容高度 rpx
borderRadiusNumber16圆角 rpx
bgColorString‘#FFFFFF’背景颜色
modeStringbottom方向 top/bottom/center

Slots

称名说明
default会覆盖默认的picker-view
handle按钮部分

三、 图片演示

bottom

mode=bottom

top

mode=top

center

mode=center

四、完整代码

<template>
	<view class="pricke">
		<uni-transition v-if="mark" ref="aniMark" custom-class="transition" mode-class="fade" :styles="stylesMark" :show="show" @click="clickMark"></uni-transition>
		<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show">
			<view class="m-picker">
				<view class="m-picker__case" :style="{
					background: bgColor,
					borderTopLeftRadius: radius[0] + 'rpx',
					borderTopRightRadius: radius[1] + 'rpx',
					borderBottomLeftRadius: radius[2] + 'rpx',
					borderBottomRightRadius: radius[3] + 'rpx',
					paddingBottom: model == 'bottom' ? 'calc(constant(safe-area-inset-bottom) + 30rpx)' : '30rpx',
					paddingBottom: model == 'bottom' ? 'calc(env(safe-area-inset-bottom) + 30rpx)' : '30rpx'
				}">
					<slot v-if="model == 'bottom'" name="handle">
						<view class="handle">
							<view class="button cancel" :style="cancelStyle" @click="cancel">{{cancelText}}</view>
							<view class="button confirm" :style="confirmStyle" @click="confirm">{{confirmText}}</view>
						</view>
					</slot>
					<slot>
						<view class="content" :style="{height: `${height}rpx`}">
							<picker-view class="picker-view" :indicator-class="indicatorClass" :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange" @pickstart="pickstart" @pickend="pickend">
								<picker-view-column v-for="(rangeItem, rangeIndex) in range" :key="rangeIndex">
									<view class="picker-view__item" v-for="(item, index) in rangeItem" :key="index">
										{{ item[rangeKey] }}
									</view>
								</picker-view-column>
							</picker-view>
						</view>
					</slot>
					<slot v-if="model != 'bottom'" name="handle">
						<view class="handle">
							<view class="button cancel" :style="cancelStyle" @click="cancel">{{cancelText}}</view>
							<view class="button confirm" :style="confirmStyle" @click="confirm">{{confirmText}}</view>
						</view>
					</slot>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import props from './props.js'
	export default {
		name:"m-picker",
		props,
		data() {
			return {
				pickerValue: [],
				pickMove: false,
			};
		},
		computed: {
			model() {
				if (this.mode == 'top') return 'top';
				else if (this.mode == 'bottom') return 'bottom';
				else if (this.mode == 'center') return 'center';
				else return 'bottom';
			},
			stylesMark() {
				return {
					position: 'fixed',
					top: 0,
					left: 0,
					right: 0,
					bottom: 0,
					zIndex: 99,
					backgroundColor: this.markBgColor,
				}
			},
			styles() {
				const top = {
					position: 'fixed',
					left: 0,
					right: 0,
					top: 0,
					zIndex: 100
				}
				const bottom = {
					position: 'fixed',
					left: 0,
					right: 0,
					bottom: 0,
					zIndex: 100
				}
				const center = {
					position: 'fixed',
					left: '50%',
					top: '50%',
					width: '90vw',
					transform: 'translate(-50%, -50%)',
					zIndex: 100
				}
				if (this.model == 'top') return top;
				else if (this.model == 'bottom') return bottom;
				else if (this.model == 'center') return center;
				else return bottom;
			},
			radius() {
				const borderRadius = this.borderRadius;
				if (this.model == 'top') return [0, 0, borderRadius, borderRadius];
				else if (this.model == 'bottom') return [borderRadius, borderRadius, 0, 0];
				else if (this.model == 'center') return [borderRadius, borderRadius, borderRadius, borderRadius];
				else return [0, 0, 0, 0];
			},
			modeClass() {
				if (this.model == 'top') return ['fade', 'slide-top'];
				else if (this.model == 'bottom') return ['fade', 'slide-bottom'];
				else if (this.model == 'center') return 'fade';
				else return ['fade', 'slide-bottom'];
			}
		},
		watch: {
			range(val) {
				if (val.length) {
					let arr = []
					for (let index in this.range) {
						arr.push(0);
					}
					this.pickerValue = arr;
				}
			}
		},
		created() {
			if (this.range && this.range.length) {
				this.pickerValue = [];
				for (let index in this.range) {
					this.pickerValue.push(0)
				}
			}
		},
		methods: {
			// 关闭
			close() {
				if (!this.pickMove) this.$emit('update:show', false)
			},
			// 取消
			cancel() {
				this.$emit('cancel')
				if (this.btnClose) this.close()
			},
			// 确定
			confirm() {
				this.$emit('confirm', this.pickerValue);
				if (this.btnClose) this.close()
			},
			// 点击遮罩
			clickMark() {
				if (this.markClose) this.close()
			},
			bindChange (e) {
				const val = e.detail.value;
				this.pickerValue = val;
			},
			pickstart() {
				this.pickMove = true;
			},
			pickend() {
				this.pickMove = false;
			}
		}
	}
</script>

<style lang="scss">
.m-picker {
	width: 100%;
	height: 100%;
	
	&__case {
		padding-left: 56rpx;
		padding-right: 56rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		
		.handle {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.button {
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				
				&.cancel {
					
				}
				
				&.confirm {
					color: #FF8833;
				}
			}
		}
		
		.content {
			width: 100%;
			height: 400rpx;
		}
		
	}
}

.picker-view {
	width: 100%;
	height: 100%;
	
	&__item {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 48rpx;
	}
}
</style>
DevilAngelia
关注
专栏目录
增强uni-app的uni-picker-view组件（添加搜索和禁选功能）
swiftlinlei的博客
12-10 4765
1、组件文件如下： <template> <view> <view> <!-- 普通弹窗 --> <uni-popup ref="popup" background-color="#fff" @change="change"> <view> <view> <uni-row> <uni-col :span="6"> .
vue 实现日期选择器(time-picker)与Popup结合-----vant
qq_39897978的博客
02-05 2745
刚开始本来想用ant-design-mobile，但是react的库和vue不兼容，所以最后找到了vux ,但是这个包有问题 ，最后就找到了vant的库，使用它的datepicker和popup组件，实现了我的功能，点击选择日期就弹出选择框： <el-form-item label="日期" > <el-input class="...
js弹出框选择器
07-01
js弹出框选择器，弹出框中左边是菜单，右边是选择后的内容项
弹出窗口与选择器（一）
05-15 6726
在第8章中，我们了解了顶层容器，例如JFrame与JApplet。另外，我们探讨了用来创建弹出窗口来显示信息或是获取用户输入的JDialog类。尽管JDialog类可以工作得很好，Swing组件集合同时提供了一些更为简单的方法来由弹出窗口获取用户输入，我们将会在本章进行探讨。 JOptionPane类对于显示信息，获取文本用户输入，或是获取问题答案十分有用。ProgressMonitor与ProgressMonitorInputStream类可以使得我们监视长时间任务的过程。另外，JColorChoose
弹出窗口与选择器（五）
guanhuaing
03-05 297
9.5 JFileChooser类 Swing组件集合同时提供了用于选择文件名字与目录的选择器：JFileChooser类。这个选择器替换了原始AWT组件集合中使用FileDialog的需要。类似于其他的Swing选择器组件，JFileChooser并没有自动被放入一个弹出窗口中，但是他可以放在我们程序中用户界面的任何地方。图9-25显示了一个具有Metal观感，Ocean主题的JFileChoo...
weapp popup+picker
u011320260的博客
06-25 889
Page({ data: { bottom: false, column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'], vaa:"" }, toggleBottomPopup(e) { console.log(e) this.setData({ bottom: true }); }, toggleBottomPopup2(e) { console.log(e) this.se...
uni-app使用picker底部弹起的滚动选择器（日期选择器）
热门推荐
JEFF_xieyuzhi的博客
11-02 1万+
picker从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。 html部分： <view class="">日期选择器</view> <view class=""> <view class=""> <view class="...
基于picker-view的日期选择器
03-22
基于picker-view的日期选择器，只有年月日选择，uni-app自带的组件不适合利用按钮触发调用，该组件可用在uni-popup里，点击按钮获取
微信小程序 picker-从底部弹起的滚动选择器
qq_43447509的博客
08-21 2222
效果图 官方文档链接 wxml
uniapp -- picker民族选择器
weixin_54721820的博客
01-30 1229
使用下拉实现民族选择器，与日期时间选择器相似。② JavaScript 内容【】//右箭头【uview组件】
jquery弹出层选择器
04-04
NULL 博文链接：https://179826097-qq-com.iteye.com/blog/1488883
弹出框选择器(iOS源代码)
03-16
来源： github/SRKControls Licence： MIT 作者： 自定义的控制器将 UITextfields 转换成选择项的指示器和日期选择器。
底部弹出滑动选择器(对话框实现)
10-06
用对话框Dialog,实现从底部弹出一个滑动选择器，代码简单易懂，可直接用。。
使用vux的组件popup-picker实现一个同时选择开始日期和结束日期的组件
weixin_40141473的博客
07-11 1053
目的：使用vux的组件popup-picker实现一个可以同时选择开始日期和结束日期的组件 组件要求： 1、同时选择开始日期和结束日期，即左边一栏是开始日期，右边一栏是结束日期 2、时间范围：T+1~T+89（即当前日期的第二天至当前日期的90天） 3、开始日期和结束日期不能是同一天（即滑动其中一栏，另一栏要实时更新，完成联动） （感觉还挺麻烦的，一步步实现吧????） 第一步：vue文件中引入并注册popup-picker组件 第二步：写一个方法，生成开始时间和结束时间的时间数组，用
弹出层选择器
zhy251917345的专栏
11-27 854
***********************html************************************ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">弹出层选择器  弹出层选择器            * 理由         
移动端 选择框内容过长解决方案之一 以vux popup-picker为例子。
让优秀成为一种习惯
02-21 5179
前言 vux popup-picker当选项值过长的时候全部显示解决方案之一。 该说的，都在注释李曼了 效果图 实现步骤 1.对popup-picker组件添加on-shadow-change函数(即滑动picker时触发) &amp;lt;popup-picker @on-shadow-change=&quot;onShadowChange&quot; :columns=&quot;3&quot; title=&quot;标题&quot; :da
vue.js+mint-ui的Popup组件和Picker组件实现省市县三级联动功能
weixin_30677617的博客
07-20 185
前言 在工作中遇到省市县三级联动的需求，传统的pc端大部分是用3个HTML <select>标签根据选中的一级地址去获取二级地址，然后根据二级地址去获取三级地址。实现省市县三级地址选择，需要2次服务端请求。这里使用mint--ui的Popup弹出框组件和picker选择器组件，无需请求服务端，通过遍历本地的json文件，实现本地输出三级地址，同时给每级地址绑定一...
全局UI方法-弹窗三-文本滑动选择器弹窗（TextPickDialog）
最新发布
yyxhzdm的博客
03-28 1264
2.当不设置selected参数时，并且设置的value值不在range范围内时，显示的是默认的range的第一个元素。1.当selected和value参数都设置时，且selecetd设置值在范围内时，value参数无效。3.根据onAccept和onChange监听或者确定选中项的数据信息。根据指定的选择范围创建文本选择器，展示在弹窗上。设置选中项的索引值。设置文本选择器的选择范围。
【uniapp】picker-view选择器的使用
每天进步一点点, 靠近小目标一点点~
03-06 5308
前文在picker使用的帖子介绍到, 需要做一个医院下拉选择的一个功能, 因为长久没用, 忘记了picker和picker-view的使用, 因为picker弹框的样式是自带的, 且无法更改样式, 插入到项目很不友好, 于是把组件替换成picker-view
uni-picker-view组件
07-27
综上所述，uni-picker-view组件是一个用于选择器的组件，可以在uni-app中使用。它可以用于创建各种类型的选择器，如日期选择器、时间选择器等。在使用uni-picker-view组件时，可以通过bindChange方法来获取选择的值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DevilAngelia

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值