效果图:(真的是图)
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},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})json
{"usingComponents": {}
}***可直接复制粘贴运行
