uni-app(popup弹出层)

2019年5月26日 0条评论 40次阅读 0人点赞

uni-app的popup弹出层

uni-app的popup弹出层,由官网提高的用户体验不是很好

<template>
	<view class="content">
		<button type="primary" @click="toggleSpec">开启POPUP</button>
		<view 
			class="popup" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<!-- 内容区域 -->
			</view>
		</view>
	</view>
</template>
<script>
	
	export default {
		data() {
			return {
				specClass: 'none',
			}
		},
		onLoad() {

		},
		methods: {
			//弹窗开关
			toggleSpec() {
				if(this.specClass === 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass === 'none'){
					this.specClass = 'show';
				}
			},
			stopPrevent(){}
		}
	}
</script>
<style lang='scss'>
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.3);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;
			.btn{
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background:#fff;
				font-size: 16upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<button type="primary" @click="toggleSpec">开启POPUP</button>

<view

class="popup"

:class="specClass"

@touchmove.stop.prevent="stopPrevent"

@click="toggleSpec"

</view>

</template>

export default {

data() {

return {

specClass: 'none',

}

onLoad() {

methods: {

//弹窗开关

toggleSpec() {

if(this.specClass === 'show'){

this.specClass = 'hide';

setTimeout(() => {

this.specClass = 'none';

}, 250);

}else if(this.specClass === 'none'){

this.specClass = 'show';

}

stopPrevent(){}

}

</script>

/* 弹出层 */

.popup {

position: fixed;

left: 0;

top: 0;

right: 0;

bottom: 0;

z-index: 99;

&.show {

display: block;

.mask{

animation: showPopup 0.2s linear both;

}

.layer {

animation: showLayer 0.2s linear both;

}

&.hide {

.mask{

animation: hidePopup 0.2s linear both;

}

.layer {

animation: hideLayer 0.2s linear both;

}

&.none {

display: none;

}

.mask{

position: fixed;

top: 0;

width: 100%;

height: 100%;

z-index: 1;

background-color: rgba(0, 0, 0, 0.3);

}

.layer {

position: fixed;

z-index: 99;

bottom: 0;

width: 100%;

min-height: 40vh;

border-radius: 10upx 10upx 0 0;

background-color: #fff;

.btn{

height: 66upx;

line-height: 66upx;

border-radius: 100upx;

background:#fff;

font-size: 16upx;

color: #fff;

margin: 30upx auto 20upx;

}

@keyframes showPopup {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

@keyframes hidePopup {

0% {

opacity: 1;

}

100% {

opacity: 0;

}

@keyframes showLayer {

0% {

transform: translateY(120%);

}

100% {

transform: translateY(0%);

}

@keyframes hideLayer {

0% {

transform: translateY(0);

}

100% {

transform: translateY(120%);

}

</style>

非常前端

One Hundred Years of Solitude

uni-app(popup弹出层)

uni-app的popup弹出层

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表评论取消回复

One Hundred Years of Solitude

uni-app的popup弹出层

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表评论 取消回复

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表评论取消回复