效果图:(真的是图)
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": {}
}***可直接复制粘贴运行