uniapp 微信小程序 自定义弹窗 效果

<template>
	<view>
		<view @click="show=true">
			<div class="regBut">
				<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/reg/icon_reg.png" mode="">
				</image>
				<text>注册角色</text>
			</div>
		</view>
		<u-popup :show="show" mode="bottom" bgColor="transparent">
			<view class="popupwin">
				<div class="popTitle">
					注册角色
				</div>
				<div class="close" @click="getHide">
					<u-icon name="close"></u-icon>
				</div>
				<scroll-view class="searchbody" scroll-y>
					<div class="list">
						<div class="listItem" @click="goPage('/pages/reg/customer')">
							<div class="iconx">
								<image
									src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/reg/icon_receivingEnterprise.png"
									mode="widthFix" style="width: 36rpx;"></image>
							</div>
							<text>注册收货企业</text>
						</div>
						<div class="listItem" @click="goPage('/pages/reg/owner')">
							<div class="iconx">
								<image
									src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/reg/icon_owner.png"
									mode="widthFix" style="width: 40rpx;"></image>
							</div>
							<text>注册车主</text>
						</div>
						<div class="listItem" @click="goPage('/pages/reg/driver')">
							<div class="iconx">
								<image
									src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/reg/icon_driver.png"
									mode="widthFix" style="width: 36rpx;"></image>
							</div>
							<text>注册驾驶员</text>
						</div>
					</div>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		GetRegCarList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				show: false,
				active: 0,
				list: [],
				CarNum: ''
			}
		},
		props: {
			datastr: {
				type: String,
				default () {
					return '';
				}
			},
			title: {
				type: String,
				default () {
					return '平台车辆选择';
				}
			},
		},
		mounted() {
			this.getdata()
		},
		methods: {
			goPage(page) {
				this.getHide()
				uni.navigateTo({
					url: page
				})
			},
			getHide() {
				this.show = false
			},
			getShow() {
				this.show = true
			},
			getdata() {
				var that = this;
				GetRegCarList({
					params: {
						CarNum: that.CarNum
					},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						that.list = res.Data
					}
				}).catch(err => {

				})
			},
			getactive(index) {
				var that = this;
				that.active = index
				that.getHide()
				that.$emit('getdata', that.list[that.active])
			},
		}
	}
</script>

<style scoped lang="scss">
	.popupwin {
		width: 750rpx;
		height: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		opacity: 1;
		position: relative;
		z-index: 1000;
	}

	.line {
		width: 100rpx;
		height: 4rpx;
		opacity: 1;
		background: #7D7D7D;
		margin: 25rpx auto;
	}

	.list {
		width: 694rpx;
		margin: 0 auto;

		.listItem {
			width: 694rpx;
			height: 112rpx;
			margin: auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			background: rgba(216, 216, 216, 0);
			box-shadow: 0px 1px 0px 0px #F2F2F2;

			.iconx {
				width: 64rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				align-content: flex-start;
			}

			text {
				font-size: 34rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #151852;
			}
		}
	}

	.nodata {
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #7D7D7D;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		margin: 64rpx auto;
	}

	.searchbody {
		height: 550rpx;
	}

	.close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		z-index: 10;
	}


	.popTitle {
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		font-size: 32rpx;
		color: #000;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		margin-left: 28rpx;
	}

	.popbut {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		// height: 60rpx;
		// background: #F5F6FC;
		// border-radius: 8rpx;
		// padding-left: 20rpx;
		// padding-right: 20rpx;

		text {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #424474;
			margin-right: 12rpx;
		}

		image {
			width: 21rpx;
			height: 13rpx;
		}
	}

	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		width: 36rpx;

		image {
			width: 36rpx;
		}
	}

	.regBut {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #5091FF;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
</style>

使用

import getPopReg from '@/components/getPopType/getPopReg.vue'
		components: {
			getPopReg
		},
<getPopReg></getPopReg>