小程序底部弹出框效果

淩亂°似流年 2022-05-15 05:21 547阅读 0赞

问题描述：点击使用说明，弹出消息框，显示相关信息

（1）wxml页面

<view class='explain' bindtap="show">
      <text class='explain_b'>使用说明</text>
    </view>
    <view class="explain-box" hidden="{
       {flag}}" bindtap="hide">
    <view class='explain_body'>
       <block wx:for="{
       {explainItems}}" wx:key="Id">
       <text class='explain_item'>{
       {item.comment}}</text>
       </block>
       <button class="close" bindtap="hide">关闭</button>
    </view>
    </view>

(2)wxss页面

.explain_body{
      position: fixed;
      bottom: 0rpx;
      background: white;
      padding-top: 20rpx;
      
    }
    
    .explain_item{
      margin-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 560;
      line-height: 34rpx;
    }
    .explain-box{
      position:fixed;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.4);
      overflow: hidden;
      z-index: 2000;
      }

(3)js页面

flag: true,
    show: function () {
        this.setData({ flag: false })
      },
      //消失
      hide: function () {
        this.setData({ flag: true })
      }

发表评论取消回复

表情：

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

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

相关阅读

相关弹出层效果和弹出框拖动效果

　　目前能够简单实现弹出层的框架实在是多，但个人还是觉得原生js代码实现比较具有根本性。　　今天刚写完弹出层效果，以及对弹出框的拖动效果，链接：[demo][]、[源码][

川长思鸟来/ 2023年08月17日 17:45/ 0 赞/ 161 阅读

相关微信小程序之自定义底部弹出框动画

1 wxml <view class="modals modals-bottom-dialog" hidden="{ {hideModal}}"> <

浅浅的花香味﹌/ 2023年06月17日 13:56/ 0 赞/ 33 阅读

相关小程序开发之弹出框

小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框官方api传送门：[https://de

朴灿烈づ我的快乐病毒、/ 2023年01月20日 14:56/ 0 赞/ 23 阅读

相关小程序开发之弹出框

小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框官方api传送门：https://de

ゝ一纸荒年。/ 2023年01月08日 11:28/ 0 赞/ 197 阅读

相关 android 底部弹出输入框,Android编程：底部弹出输入框

Android编程：底部弹出的对话框环境：主机:WIN10 开发环境:Android Studio 2.2 Preview 3 说明：在《Android编程：底

╰+攻爆jí腚メ/ 2022年10月17日 11:21/ 0 赞/ 29 阅读

相关小程序底部弹出框效果

问题描述：点击使用说明，弹出消息框，显示相关信息（1）wxml页面 <view class='explain' bindtap="show"> <te

淩亂°似流年/ 2022年05月15日 05:21/ 0 赞/ 548 阅读

相关小程序弹出框

[https://www.cnblogs.com/bgwhite/p/9335648.html][https_www.cnblogs.com_bgwhite_p_9335648

逃离我推掉我的手/ 2022年04月22日 16:16/ 0 赞/ 308 阅读

相关微信小程序底部弹出模态框

若有疑问请加qq群:581478349；承接小程序开发，web开发 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

迷南。/ 2021年09月20日 08:32/ 0 赞/ 574 阅读

相关底部弹出框动画

qq微信小程序学习交流群：581478349 ![20190319101910350.png][]

傷城~/ 2021年09月18日 13:14/ 0 赞/ 503 阅读

相关小程序弹出框详解

![标题图][1240] 小程序弹出框详解 qjlx: function() { var itemList = ['病假', '事假'];

待我称王封你为后i/ 2021年09月17日 04:40/ 0 赞/ 426 阅读