赞
踩
目录
最近使用了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;
喜欢的可以用了!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。