uniapp 自定义 picker

前言

我们在开发的过程中经常会遇到现有插件无法满足需求的情况，毕竟不是组件库不能满足项目所有需求，这时就需要我们自己去构建组件。

写这篇博文也是记录我平时开发的，以后可能会用得到的东西。希望大家看到本博文也能得到一些启发，我也就功德无量了。

正文

话不多说直接上代码

Dom

<view :style="{position: isShow?'fixed':''}">
	<view class="anyiPicker" :animation="animationData">
		<view class="anyiPicker_btn">
			<text @click.stop="close">取消</text>
			<text @click.stop="confirmFun">确定</text>  
		</view>
		<view class="anyiPicker_content">
			<block v-for="(al,ald) in addressList" :key="ald">
				<text id="confirmText" :data-address="al">{{ al.name }}</text>
			</block> 
		</view>
	</view>
	<view class="cover" v-if="isShow" @click.stop="close"></view>
</view>复制

JS

data(){
	return{
		animationData: {},
		systemInfo: uni.getSystemInfoSync(),
		isShow: false,
		addressList:[
			{name: "零阳镇"},
			{name: "待发送镇"},
			{name: "收到镇"},
			{name: "娃儿镇"},
			{name: "查询镇"},
			{name: "和聚汇镇"},
			{name: "热镇"},
			{name: "问问镇"},
			{name: "不能镇"},
			{name: "以oui镇"},
			{name: "毒贩夫妇镇"},
			{name: "冲冲冲镇"},
			{name: "问问多少镇"},
		],
	} 
} 
/**
 * 方法
 * */ 
onShow() {
	let animation = uni.createAnimation({
		duration: 500,
		timingFunction: 'ease',
	})
	this.animation = animation;
},
open(){
	this.isShow = true 
	this.animation.translateY(-1090/750 * this.systemInfo.windowWidth).step();
	this.animationData = this.animation.export(); 
}, 
close(){
	this.isShow = false 
	this.animation.translateY(1090/750 * this.systemInfo.windowWidth).step();
	this.animationData = this.animation.export();
},
confirmFun(e){
	const query = uni.createSelectorQuery().in(this)
	query.select("#confirmText").boundingClientRect(item=>{
		console.log("11111111111", item.dataset.address)
	}).exec() 
	this.close()
},复制

scss

.cover{
	height: 100vh;
	width: 100vw;
	position: absolute;
	z-index: 999;
	background: rgba(0,0,0,.5);
}
.anyiPicker{
	position: fixed;
	background-color: $white;
	z-index: 9999;
	max-height: 1100rpx;
	bottom: -1100rpx;
	width: 100%; 
	padding-bottom: env(safe-area-inset-bottom);
	&_btn{
		display: flex;
		flex-direction: row; 
		justify-content: space-between; 
		padding: 30rpx;
		font-size: 36rpx;
		border-bottom: 1rpx solid $lineColor;
		text:first-child{
			color: $fontGrey;
		}
		text:last-child{
			color: $green;
		}
	}
	&_content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		height: 400rpx;
		overflow: scroll;
		color: $fontGrey;
	}
}复制

结语

代码如上，如果您是新手估计理解有些困难。

可如果是老鸟 ‘(ˉ▽￣～) 切~~！就这~’。

欢迎留言交流！！！