本文实例为大家分享了微信小程序实现底部弹窗的具体代码，供大家参考，具体内容如下                    

xml:

<view bindtap="clickme">点击我可以看到底部弹框的出现</view>
 
<!--屏幕背景变暗的背景  -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--弹出框  -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<!--自定义弹窗内容-->
</view>

css:

/*使屏幕变暗  */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
  height: 50%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}

js: 

//点击我显示底部弹出框
  clickme: function () {
    this.showModal();
  },
 
  //显示对话框
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  //隐藏对话框
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  },

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 深入理解JS树结构深度优先算法，有哪些知识点

  什么是树在现实生活中，相信每个人对树都很熟悉，不管是柳树、杨树还是桃树，可以说树在我们生活中随处可见；在计算机世界，树是一种分层结构的抽象模型，如下图所示：树结构的应用有很多

• 如何利用JavaScript实现求平均值，代码是什么

  方法：1、将需要求平均值的数存入数组中；2、使用“for(i=0;i<arr.length;i++){sum+=arr[i]}”语句遍历数组，计算多个数的总和并赋值给变量“sum”；3、使用“sum/arr.length”语句计算出平均值。

• Ubuntu中如何安装nodejs和npm，操作是什么

  1.安装python-software-propertiessudoapt-getinstallpython-software-properties2.添加ppacurl-sLhttps://deb.nodesource.com/setup_8.x|sudo-Ebash-3.安装nodejs和npmsudoapt-getinstallnodejs4.查看

• JS函数同步是什么，怎样实现

  如果调用者在函数返回时能够获得预期结果(即获得预期返回值或看到预期效果)，则该函数同步。如果函数同步，即使调用函数执行的任务耗时，也会等到得到预期的结果。

• React服务端渲染原理怎样理解？一文带你搞懂React服务端渲染

  React服务端渲染原理是什么？很多朋友可能听说过React服务端渲染，但是对其原理并不清楚，因此下面小编就给大家介绍一下React服务端渲染原理以及实例，感兴趣的朋友可以参考。