• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mpvue微信小程序半屏弹框(half-screen-dialog)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
  1 <template>
  2   <div>
  3     <a @click="isShow">half-screen-dialog</a>
  4     <!--BEGIN half-screen-dialog-->
  5     <!-- mpvue微信小程序不支持vue中的transition -->
  6     <div v-if="show">
  7       <div class="weui-mask"
  8            @click="isShow">
  9       </div>
 10       <div class="weui-half-screen-dialog">
 11         <div class="weui-half-screen-dialog__hd">
 12           <div class="weui-half-screen-dialog__hd__main">
 13             <strong class="weui-half-screen-dialog__title_center">标题</strong>
 14           </div>
 15         </div>
 16         <div class="weui-half-screen-dialog__bd">
 17           可放自定义内容
 18         </div>
 19       </div>
 20     </div>
 21     <!--END half-screen-dialog-->
 22   </div>
 23 </template>
 24 
 25 <script>
 26 import '../../../static/weui/weui.css'
 27 export default {
 28   data () {
 29     return {
 30       show: true,
 31       animationData: {}
 32     }
 33   },
 34   methods: {
 35     isShow () {
 36       this.show = !this.show
 37     }
 38   }
 39 }
 40 </script>
 41 
 42 <style scoped>
 43 .weui-mask {
 44   position: fixed;
 45   z-index: 1000;
 46   top: 0;
 47   right: 0;
 48   left: 0;
 49   bottom: 0;
 50   background: rgba(0, 0, 0, 0.6);
 51 }
 52 
 53 /* Half Screen Dialog Styles*/
 54 .weui-half-screen-dialog {
 55   position: fixed;
 56   left: 0;
 57   right: 0;
 58   bottom: 0;
 59   height: 35%;
 60   max-height: 75%;
 61   z-index: 5000;
 62   line-height: 1.4;
 63   background-color: #ffffff;
 64   border-top-left-radius: 12px;
 65   border-top-right-radius: 12px;
 66   overflow: hidden;
 67   padding: 0 calc(24px + constant(safe-area-inset-right))
 68     constant(safe-area-inset-bottom) calc(24px + constant(safe-area-inset-left));
 69   padding: 0 calc(24px + env(safe-area-inset-right)) env(safe-area-inset-bottom)
 70     calc(24px + env(safe-area-inset-left));
 71 }
 72 .weui-half-screen-dialog__hd {
 73   font-size: 8px;
 74   height: 8em;
 75   display: -webkit-box;
 76   display: -webkit-flex;
 77   display: flex;
 78   -webkit-box-align: center;
 79   -webkit-align-items: center;
 80   align-items: center;
 81 }
 82 .weui-half-screen-dialog__hd .weui-icon-btn {
 83   position: absolute;
 84   top: 50%;
 85   -webkit-transform: translateY(-50%);
 86   transform: translateY(-50%);
 87 }
 88 .weui-half-screen-dialog__hd__side {
 89   position: relative;
 90 }
 91 .weui-half-screen-dialog__hd__main {
 92   -webkit-box-flex: 1;
 93   -webkit-flex: 1;
 94   flex: 1;
 95 }
 96 .weui-half-screen-dialog__hd__side + .weui-half-screen-dialog__hd__main {
 97   text-align: center;
 98   padding: 0 40px;
 99 }
100 .weui-half-screen-dialog__hd__main
101   + .weui-half-screen-dialog__hd__side
102   .weui-icon-btn {
103   right: 0;
104 }
105 .weui-half-screen-dialog__title {
106   display: block;
107   color: rgba(0, 0, 0, 0.9);
108   font-weight: 700;
109   font-size: 15px;
110 }
111 .weui-half-screen-dialog__title_center {
112   display: block;
113   color: rgba(0, 0, 0, 0.9);
114   font-weight: 700;
115   font-size: 15px;
116   text-align: center;
117 }
118 .weui-half-screen-dialog__subtitle {
119   display: block;
120   color: rgba(0, 0, 0, 0.5);
121   font-size: 10px;
122 }
123 .weui-half-screen-dialog__bd {
124   word-wrap: break-word;
125   -webkit-hyphens: auto;
126   hyphens: auto;
127   overflow-y: auto;
128 }
129 .weui-half-screen-dialog__desc {
130   padding-top: 4px;
131   font-size: 17px;
132   color: rgba(0, 0, 0, 0.9);
133   line-height: 1.4;
134 }
135 .weui-half-screen-dialog__tips {
136   padding-top: 16px;
137   font-size: 14px;
138   color: rgba(0, 0, 0, 0.3);
139   line-height: 1.4;
140 }
141 .weui-half-screen-dialog__ft {
142   padding: 40px 24px 32px;
143   text-align: center;
144 }
145 .weui-half-screen-dialog__ft .weui-btn {
146   display: inline-block;
147   vertical-align: top;
148   margin: 0 8px;
149   width: 120px;
150 }
151 </style>

效果如下:

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
winform小程序---猜拳小游戏发布时间:2022-07-18
下一篇:
定时倒计时关机的小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap