首页uniapp 模态窗漂亮

uniapp 模态窗漂亮

时间: 2025-01-30 18:45:38 浏览: 33

### 实现漂亮的模态窗效果 in UniApp 在 UniApp 中创建美观的模态窗口可以通过自定义样式和使用内置组件相结合的方式完成。下面是一个具体的例子，展示如何通过 `uni-popup` 组件以及 CSS 来增强模态框的表现力。 #### 使用 uni-popup 创建基本模态对话框首先引入官方推荐使用的弹层组件 `uni-popup`： ```html <template> <view class="content">  <button type="primary" @click="showPopup">打开模态框</button>  <uni-popup ref="popup" background-color="#fff" :mask-click="false"> <view class="custom-modal-content"> 这里可以放置任意HTML结构的内容...  <button @click="closePopup">关闭</button> </view> </uni-popup> </view> </template> <script> export default { methods: { showPopup() { this.$refs.popup.open(); }, closePopup() { this.$refs.popup.close(); } } } </script> <style scoped> .custom-modal-content { padding: 20px; border-radius: 10px; /* 圆角 */ } /* 自定义动画效果 */ @keyframes fadeInDown { from { transform: translateY(-30%); opacity: 0;} to {transform: translateY(0);opacity: 1;} } .custom-modal-content { animation-name: fadeInDown; animation-duration: .5s; animation-fill-mode: both; } </style> ``` 此代码片段展示了如何利用 `uni-popup` 构建一个简单的模态窗口，并为其添加了淡入下降的效果[^1]。对于更复杂的交互需求或是想要应用特定主题风格的情况，则可以根据实际应用场景调整上述模板中的 HTML 结构、CSS 类名及其属性值。此外还可以考虑集成第三方UI库如 Vant Weapp 或 uView UI 提供更多预设好的视觉元素和支持功能[^2]。

阅读全文