uniapp开发 自定义样式效果

源码

<template>
	<view>
		<view @click="show=true">
			<slot></slot>
		</view>
		<u-popup :show="show" @close="show=false" mode="bottom" bgColor="transparent">
			<view class="popupwin">
				<div class="popTitle">
					{{title}}
				</div>
				<div class="close" @click="getHide">
					<u-icon size="20" name="close"></u-icon>
				</div>
				<div class="confirm" @click="confirm">
					确认
				</div>
				<scroll-view class="searchbody" scroll-y>
					<div class="list">
						<div @click="getactive(index)" class="listitem" v-for="(item,index) in list[0]" :key="index">
							<text>{{item}}</text>
							<div @click.stop="getactiveremove(index)" v-if="active==index" class="icon">
								<u-icon size="24" name="minus-circle-fill" color="#FFA41E"></u-icon>
							</div>
						</div>
					</div>
					<u-gap height="80" bgColor="rgba(0,0,0,0)" marginTop="10" marginBottom="10"></u-gap>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		industryGetList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				show: false,
				keyword: '',
				item: 0,
				active: 0,
				list: [
					[
						'海外',
						'北京',
						'天津',
						'河北',
						'山西',
						'内蒙古',
						'辽宁',
						'吉林',
						'黑龙江',
						'上海',
						'江苏',
						'浙江',
						'安徽',
						'福建',
						'江西',
						'山东',
						'河南',
						'湖北',
						'湖南',
						'广东',
						'广西',
						'海南',
						'重庆',
						'四川',
						'贵州',
						'云南',
						'西藏',
						'陕西',
						'甘肃',
						'青海',
						'宁夏',
						'新疆',
					]
				]
			}
		},
		props: {
			title: {
				type: String,
				default () {
					return '选择地区'
				}
			},
			type: {
				type: Boolean,
				default () {
					return false
				}
			},
		},
		watch: {},
		mounted() {},
		methods: {
			getshow() {
				this.show = true
			},
			getHide() {
				this.show = false
			},
			getactive(e) {
				this.active = e
			},
			getactiveremove() {
				this.active = ''
			},
			confirm() {
				this.show = false
				this.$emit('getdata', this.list[0][this.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: 686rpx;
		margin: 0 auto;
		border-top: 1rpx solid #E6E6E6;

		.listitem {
			height: 96rpx;
			width: 100%;
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 32rpx;
			}

			text {
				margin-left: 32rpx;
				font-size: 34rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}

	.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;
		left: 30rpx;
		top: 42rpx;
		z-index: 10;
	}

	.popTitle {
		height: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		font-size: 32rpx;
		color: #000;
	}

	.confirm {
		position: absolute;
		right: 64rpx;
		top: 32rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}
</style>