目录
前言:
正文:
前言:横屏的尺寸问题
最近使用了uniapp写了一个横屏的微信小程序和H5的项目,也是本人首次写的横屏项目,多少是有点踩坑+不太适应。。。
先说最让我一脸懵的点,尺寸大小,下面一段代码,设置文字的大小伟24rpx;横屏,竖屏下的效果如图
<view class="text" style="font-size: 24rpx">Jay丶萧邦</view>
可以很直观的看出来,横竖屏之间的尺寸差异是蛮大的,大概相差2倍的样子,所以要是业务设计要求可以旋转屏幕的话,得做适配工作,这里就不再多说;
正文:直接附上源码,不多说
言归正传,因为我看UI库好像都不太满足横屏的项目,所以有很多的东西都需要自己手撕一个,弹出框就是其一,先看效果哈:
uniapp横屏弹出框
如果觉得还比较符合您的需求,拿来整改整改即可,直接上代码:
<template><view class="dialog-overlay" v-if="visible" :style="{ zIndex: zIndex }" @tap="closeMask"><view class="dialog" v-if="dialogVisible" :style="[getStyle]" :class="[showAnimate ? 'bounce-enter-active' : 'bounce-leave-active']" @tap.stop><view class="close" v-if="showClose" @tap="close"><view class="iconfont icon-guanbi"></view></view><slot></slot></view></view>
</template><script>
export default {name: 'CustomDialog',props: {visible: {type: Boolean,default: false},width: {type: String,default: 'auto'},height: {type: String,default: 'auto'},radius: {type: String,default: '16rpx'},bgColor: {type: String,default: '#fff'},customStyle: {type: Object,default: () => ({})},/* 是否展示右上角关闭按钮 */showClose: {type: Boolean,default: true},/* 是否点击遮罩层可以关闭弹出框 */maskCloseAble: {type: Boolean,default: true},/* 弹出框层级 */zIndex: {type: Number,default: 999}},data() {return {dialogVisible: this.visible,showAnimate: this.visible,timer: null};},beforeDestroy() {this.clearTimeout();},watch: {visible: {handler(val) {setTimeout(() => {this.dialogVisible = val;this.showAnimate = val;}, 50);},immediate: true}},computed: {getStyle() {return {width: this.width,height: this.height,background: this.bgColor,borderRadius: this.radius,...this.customStyle};}},methods: {clearTimeout() {if (this.timer) {clearTimeout(this.timer);this.timer = null;}},closeMask() {if (!this.maskCloseAble) return;this.close();},close() {this.closeAnimate();this.timer = setTimeout(() => {this.$emit('close');this.$emit('update:visible', false);}, 500);},closeAnimate() {this.showAnimate = false;this.clearTimeout();}}
};
</script><style lang="scss" scoped>
.dialog-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;background-color: rgba(#000, 0.3);
}.dialog {position: relative;border-radius: 16px;padding: 20rpx;padding-bottom: 14rpx;margin-left: -50rpx;opacity: 0;.close {position: absolute;width: 28rpx;height: 28rpx;border-radius: 50%;background-color: rgba(#000, 0.6);top: -10rpx;right: -10rpx;.icon {width: 10rpx;height: 10rpx;}}
}/* 打开与关闭的类名 */
.bounce-enter-active {animation: bounceIn 0.5s both;
}
.bounce-leave-active {animation: bounceOut 0.5s both;
}/* 定义bounceIn动画 */
@keyframes bounceIn {0% {opacity: 0;transform: scale(0);}50% {opacity: 1;transform: scale(1.2);}70% {opacity: 1;transform: scale(0.9);}100% {opacity: 1;transform: scale(1);}
}
/* 定义 bounceOut 动画 */
@keyframes bounceOut {0% {opacity: 1;transform: scale(1);}25% {opacity: 1;transform: scale(0.95);}50% {opacity: 0;transform: scale(1.1);}100% {opacity: 0;transform: scale(0);}
}.icon-guanbi {color: #94ffd8;font-size: 16rpx;
}
</style>
使用:
<template><view class="index"><button @click="visible = true">click</button><custom-dialog :visible.sync="visible" width="500rpx" height="240rpx" @close="close"><view class="content">hello,hello</view></custom-dialog></view>
</template><script>
import CustomDialog from '@/components/CustomDialog/index.vue';
export default {components: {CustomDialog},data() {return {visible: false};},methods: {close() {console.log('我可以做点什么');}}
};
</script><style lang="scss" scoped>
.index {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;
}
</style>
若是想根据内容大小来撑开宽度高度的话,那就不用设置width 和 height;
喜欢的可以用了!