uniapp 自定義 picker

Chengo發表於2023-03-02
APP

前言

我們在開發的過程中經常會遇到現有外掛無法滿足需求的情況，畢竟不是元件庫不能滿足專案所有需求，這時就需要我們自己去構建元件。

寫這篇博文也是記錄我平時開發的，以後可能會用得到的東西。希望大家看到本博文也能得到一些啟發，我也就功德無量了。

正文

話不多說直接上程式碼

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;
	}
}

結語

程式碼如上，如果您是新手估計理解有些困難。

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

歡迎留言交流！！！

相關文章