微信小程序——点击某个按钮实现下面弹窗的出现

本文主要是介绍微信小程序——点击某个按钮实现下面弹窗的出现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果图:(真的是图)

wxml(代码里面有解释）

<button type="primary" bindtap="Popup">点我</button>
<!--点击后灰色背景的设置-->
<view wx:if="{{now_state}}" class="background" 	 bindtap="hideModal"
></view>



<!--弹窗的出现-->
<view animation="{{animationData}}" class="box" wx:if="{{now_state}}">
<!--弹窗内部内容-->
</view>

 wxss

.background{
  width: 100%;
  height: 100%;
  position: fixed;/*fixed属性值的解释：相对于我们当前的界面进行绝对定位，不随屏幕的滑动而滑动*/
  top: 0;/*top=0和left=0的作用是确认组件4个定点的一个坐标，如果不进行确认则该组件前面的组件会影响它*/
  left: 0;
  background: #000;
  opacity: 0.2;/*设置背景的透明度（取值范围为0~1）*/
  overflow: hidden;/*该属性的功能是隐藏溢出，就是当我们现在的这个组件里面有其他组件，并且其他组件的宽或者高大于我们当前组件的宽或高时（按照正常情况，父组件的宽高都为0，没有被子组件撑起来，故不会显示），正常显示子组件，并同时正常显示父组件*/
  z-index: 1000;/*堆叠顺序,有时候我们设置的组件可能会有重叠的部分，那重叠的部分到底是显示哪一个组件呢？这就得靠我们的z-index属性了，z-index的属性值越高则它就越容易显示在我们的页面。注意点：只有在我们设置了position属性时，z-index才会起效果，否则是不会出现效果的*/
}
.box{
    height: 30%;/*设置弹窗的宽和高*/
    width: 100%;
    overflow: hidden;/*隐藏溢出*/
    position: fixed;/*以当前页面为参考物，进行页面的固定*/
    bottom: 0;/*4个定点中一个定点的确认*/
    left: 0;
    z-index: 2000;/*堆叠顺序*/
    background: #fff;/*背景颜色*/
    text-align: center;/*组件内部字体居中*/
}

js

// pages/exampless/exampless.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    now_state:null

  },
  Popup(e){
    var that = this 
    that.setData({
      now_state:true
    })
    console.log(that.data.now_state);

  },
  //点击黑色背景触发的事件
  hideModal(e){
    //首先创建一个动画对象（让页面不在是一个“死页面”）
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    //animation.translateY(300)中的translate函数是表示在y轴上平移多少px，而后面紧接着的.step表示前面动画的完成，可以开始下一个动画了
    animation.translateY(300).step()
    this.setData({
      /*这里的export函数是导出动画队列，在外米的wxml中会用到该数据，同时export方法在调用完后会清掉前面的动画操作 */
      animationData: animation.export(),
    })
    /*这里的setTimeout是一个延时器，而它在这里延时了200ms，然后在执行动画 */
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        now_state: false,
      })
    }.bind(this), 200)
    var that = this
   
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

json

{
  "usingComponents": {}
}

***可直接复制粘贴运行

这篇关于微信小程序——点击某个按钮实现下面弹窗的出现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！