弹指一挥，解忧愁，轻松搞定uniapp圆角弹出层

前端

2023-10-14 13:56:05

圆角弹出层：提升 uni-app 用户体验和视觉效果

作为一名合格的 uni-app 开发者，掌握圆角弹出层的制作技巧至关重要。圆角弹出层不仅能提升用户体验，还能让你的应用程序在视觉上更胜一筹。本篇文章将详细剖析圆角弹出层的设计要点，让你轻松摆脱呆板边框的束缚，打造赏心悦目的弹出窗口。

剖析问题核心

初学者往往会误以为给弹出层直接添加圆角边框就能实现圆角弹出层，但实际上这样做只能得到死角的弹出层，丝毫没有圆润的效果。

拨开迷雾见明月

要实现真正的圆角弹出层，我们必须剑走偏锋，将弹出层背景设置为透明，然后在里面添加白色背景元素并添加圆角。这样，我们巧妙地绕过了 uni-app 本身的局限性，成功打造出美观实用的圆角弹出层。

实践出真知

新建 uni-app 项目： 在 pages.json 中添加一个名为“dialog”的新页面。
编写 dialog.vue： 添加以下代码：

<template>
  <view class="dialog-wrapper">
    <view class="dialog-content">
      <view class="dialog-title">圆角弹出层</view>
      <view class="dialog-message">这是一个圆角弹出层示例。</view>
      <view class="dialog-actions">
        <button @click="closeDialog">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    closeDialog() {
      uni.navigateBack();
    }
  }
}
</script>

<style>
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 320px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}

.dialog-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.dialog-message {
  font-size: 16px;
  margin-bottom: 10px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
}

button {
  padding: 6px 12px;
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>

修改 app.vue： 添加以下代码：

import Dialog from './pages/dialog/dialog.vue';

export default {
  components: {
    Dialog
  },
  methods: {
    showDialog() {
      uni.navigateTo({
        url: '/pages/dialog/dialog'
      });
    }
  }
}