原生微信小程序实现弹出层效果

<view class="popupView" wx:if="{{ popupView }}">
    <!-- 遮罩区域，点击隐藏弹出层 -->
    <view class="close" bindtap="changePopupView"></view> 
    <!-- 内容区 -->
    <view class="content">
        内容区
    </view>
</view>

// pages/food/foodlist/foodlist.js
import api from '../../../utils/api/index';
Page({
    data: {
        popupView:false
    },
    changePopupView(){
        this.setData({popupView:!this.data.popupView})
    }
})

.popupView .close{
    flex-grow: 1;
    background-color: rgba(41, 41, 41, 0.699);
}
.popupView .content{
    background-color: #f5f5f5;
    padding: 15rpx;
}