有哪些网站可以做淘宝客,无人区高清免费网页直播,济南网站seo顾问,广州牌手表网站目录 前言#xff1a;
正文#xff1a; 前言#xff1a;横屏的尺寸问题 最近使用了uniapp写了一个横屏的微信小程序和H5的项目#xff0c;也是本人首次写的横屏项目#xff0c;多少是有点踩坑不太适应。。。
先说最让我一脸懵的点#xff0c;尺寸大小#xff0c;下面一…目录 前言
正文 前言横屏的尺寸问题 最近使用了uniapp写了一个横屏的微信小程序和H5的项目也是本人首次写的横屏项目多少是有点踩坑不太适应。。。
先说最让我一脸懵的点尺寸大小下面一段代码设置文字的大小伟24rpx横屏竖屏下的效果如图
view classtext stylefont-size: 24rpxJay丶萧邦/view 可以很直观的看出来横竖屏之间的尺寸差异是蛮大的大概相差2倍的样子所以要是业务设计要求可以旋转屏幕的话得做适配工作这里就不再多说
正文直接附上源码不多说
言归正传因为我看UI库好像都不太满足横屏的项目所以有很多的东西都需要自己手撕一个弹出框就是其一先看效果哈 uniapp横屏弹出框 如果觉得还比较符合您的需求拿来整改整改即可直接上代码
templateview classdialog-overlay v-ifvisible :style{ zIndex: zIndex } tapcloseMaskview classdialog v-ifdialogVisible :style[getStyle] :class[showAnimate ? bounce-enter-active : bounce-leave-active] tap.stopview classclose v-ifshowClose tapcloseview classiconfont icon-guanbi/view/viewslot/slot/view/view
/templatescript
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();}}
};
/scriptstyle langscss 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
使用
templateview classindexbutton clickvisible trueclick/buttoncustom-dialog :visible.syncvisible width500rpx height240rpx closecloseview classcontenthello,hello/view/custom-dialog/view
/templatescript
import CustomDialog from /components/CustomDialog/index.vue;
export default {components: {CustomDialog},data() {return {visible: false};},methods: {close() {console.log(我可以做点什么);}}
};
/scriptstyle langscss scoped
.index {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;
}
/style 若是想根据内容大小来撑开宽度高度的话那就不用设置width 和 height
喜欢的可以用了
