用 UniApp 打造新颖雅观的弹出框

 
在移动应用开发中，弹出框是一种常见且实用的交互组件，它可以大概有效地向用户展示重要信息或获取用户的反馈。UniApp 作为一款精良的跨平台开发框架，提供了强大的功能和丰富的样式支持，让我们可以轻松实现各种独特的界面效果。本文将详细先容如何使用 UniApp 实现一个新颖雅观的弹出框，接纳多巴胺配色方案，使界面更加活泼和吸引人。

1. <template>
2.   <view class="page-container">
3.     <!-- 触发弹出框的按钮 -->
4.     <button @click="showPopup = true">打开弹出框</button>
5.     <!-- 弹出框组件 -->
6.     <view class="popup-mask" v-if="showPopup" @click="closePopup">
7.       <view class="popup-box" @click.stop>
8.         <view class="popup-header">
9.           <text>重要提示</text>
10.           <button class="close-btn" @click="closePopup">×</button>
11.         </view>
12.         <view class="popup-content">
13.           <text>这是一个弹出框示例，你可以在这里展示重要信息。</text>
14.         </view>
15.         <view class="popup-footer">
16.           <button @click="closePopup">确认</button>
17.         </view>
18.       </view>
19.     </view>
20.   </view>
21. </template>
22. <script>
23. export default {
24.   data() {
25.     return {
26.       showPopup: false
27.     };
28.   },
29.   methods: {
30.     // 关闭弹出框的方法
31.     closePopup() {
32.       this.showPopup = false;
33.     }
34.   }
35. };
36. </script>
37. /* 页面容器样式 */
38. .page-container {
39.   display: flex;
40.   justify-content: center;
41.   align-items: center;
42.   height: 100vh;
43. }
45. /* 弹出框遮罩层样式 */
46. .popup-mask {
47.   position: fixed;
48.   top: 0;
49.   left: 0;
50.   width: 100%;
51.   height: 100%;
52.   background-color: rgba(0, 0, 0, 0.5);
53.   display: flex;
54.   justify-content: center;
55.   align-items: center;
56.   animation: fadeIn 0.3s ease;
57. }
59. /* 弹出框主体样式 */
60. .popup-box {
61.   width: 80%;
62.   max-width: 300px;
63.   background: linear-gradient(to bottom, #f6d365, #fda085);
64.   border-radius: 15px;
65.   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
66.   overflow: hidden;
67.   position: relative;
68. }
70. /* 弹出框头部样式 */
71. .popup-header {
72.   padding: 15px;
73.   color: white;
74.   display: flex;
75.   justify-content: center;
76.   align-items: center;
77. }
79. /* 关闭按钮样式 */
80. .close-btn {
81.   position: absolute;
82.   top: 10px;
83.   right: 10px;
84.   background: none;
85.   border: none;
86.   font-size: 24px;
87.   color: white;
88.   cursor: pointer;
89.   outline: none;
90. }
92. /* 弹出框内容区域样式 */
93. .popup-content {
94.   padding: 20px;
95.   text-align: center;
96.   color: #333;
97. }
99. /* 弹出框底部样式 */
100. .popup-footer {
101.   display: flex;
102.   justify-content: center;
103.   padding: 15px;
104.   border-top: 1px solid rgba(255, 255, 255, 0.5);
105. }
107. .popup-footer button {
108.   background-color: #f6d365;
109.   border: none;
110.   padding: 10px 20px;
111.   border-radius: 5px;
112.   color: white;
113.   font-weight: bold;
114.   cursor: pointer;
115.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
116. }
118. /* 淡入动画关键帧 */
119. @keyframes fadeIn {
120.   from {
121.     opacity: 0;
122.   }
123.   to {
124.     opacity: 1;
125.   }
126. }

复制代码

 
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。