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