微信小程序自定义遮盖层

小鱼儿 2021-07-24 22:45 398阅读 0赞

<button bindtap="showview">Show</button>
    <view class="bg" bindtap='hideview' style='display:{
       {display}}'></view>
    <view class="show txt" style='display:{
       {display}}'>内容区</view>

.bg {
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index: 1001;
      -moz-opacity: 0.7;
      opacity: 0.70;
      filter: alpha(opacity=70);
    }
     
    .show {
      display: none;
      text-align: center;
      position: absolute;
      top: 45%;
      left: 20%;
      width: 53%;
      height: 10%;
      padding: 8px;
      border: 8px solid #e8e9f7;
      background-color: white;
      z-index: 1002;
      overflow: auto;
    }
    .txt{
      margin-top: 20rpx;
      font-size: 28rpx;
      color: royalblue
    }

Page({
     
      data: {
        display: ''
      },
    
      onLoad: function(options) {
    
      },
    
    //显示
      showview: function() {
        this.setData({
          display: "block"
        })
      },
    //隐藏
      hideview: function() {
        this.setData({
          display: "none"
        })
      }
    
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序自定义组件

[https://blog.csdn.net/melovemingming/article/details/82712601][https_blog.csdn.net_melo

刺骨的言语ヽ痛彻心扉/ 2022年12月24日 15:49/ 0 赞/ 324 阅读

相关微信小程序自定义地址组件

项目需求需要调用后台传过来的地址，存储地址时存的是地址的id，所以市面上的地址组件均不符合我的需求，只能自定义一个。技术选取

迈不过友情╰/ 2022年11月15日 14:12/ 0 赞/ 338 阅读

相关微信小程序之『自定义toast』

转载：请写明掘金原文链接及作者名 ‘小小小’ 一个潜心研究小程序QQ群：139128168 ← 点击加群一、微信官方默认toast toast最常见了，几乎

Bertha 。/ 2022年07月14日 14:14/ 0 赞/ 338 阅读

相关【微信小程序】自定义组件

手把手教你实现微信小程序中的自定义组件微信小程序中的组件前言之前做小程序开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只

向右看齐/ 2022年06月03日 03:50/ 0 赞/ 297 阅读

相关微信小程序自定义组件示例

声明：此文借鉴两位前辈的博文 [https://www.jianshu.com/p/8a2a730d9e60][https_www.jianshu.com_p_8a2a73

亦凉/ 2022年05月29日 12:28/ 0 赞/ 374 阅读

相关微信小程序自定义 tabbar

一定的需求情况下，无法使用小程序原生的 `tabbar` 的时候，需要自行实现一个和 `tabbar` 功能一模一样的自制组件。查阅了海量的博客和文档之后，亲自踩坑。总结了

怼烎@/ 2022年02月13日 14:27/ 0 赞/ 524 阅读

相关微信小程序：自定义导航栏

看到有的微信小程序的页面左上角有了个“小房子”，可以返回首页，这是怎么做到的？其实这是微信开放的自定义的自定义导航栏来完成，但是最开始，对于一个页面很多的小程序，其实有点一言难

矫情吗；*/ 2022年01月17日 03:37/ 0 赞/ 688 阅读

相关微信小程序自定义分享封面

onShareAppMessage:function(options){ let thas = this; if (options.

比眉伴天荒/ 2021年12月05日 02:57/ 0 赞/ 514 阅读

相关微信小程序标签自定义属性

语法:data-xx='xxx' 其中: (1)data-为固定结构 (2)xx命名不能有大写,有大写会被自动转换为小写 (3)

水深无声/ 2021年07月25日 00:52/ 0 赞/ 581 阅读

相关微信小程序自定义遮盖层

<button bindtap="showview">Show</button> <view class="bg" bindtap='hideview' sty

小鱼儿/ 2021年07月24日 22:45/ 0 赞/ 399 阅读