微信小程序自定义遮盖层

小鱼儿 2021-07-24 22:45 411阅读 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 条评论，411人围观）

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

相关阅读

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

在写小程序的时候，有时候页面的内容过多，逻辑比较复杂，如果全部都写在一个页面的话，会比较繁杂，代码可读性比较差，也不易于后期代码维护，这时候可以把里面某部分功能抽出来，单独封装

╰半橙微兮°/ 2023年10月03日 22:37/ 0 赞/ 19 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关微信小程序自定义 tabbar

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

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

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

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

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

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

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

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

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

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

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

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

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

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