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

超级小的大杯柠檬水

已于 2023-06-19 17:39:48 修改

阅读量2.5k

点赞数 3

分类专栏：原生微信小程序文章标签：微信小程序小程序

于 2023-06-17 17:13:06 首次发布

本文链接：https://blog.csdn.net/qq_59636442/article/details/131262434

版权

原生微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

购物车弹出层

WXML

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

JS

// pages/food/foodlist/foodlist.js
Page({
    data: {
        popupView:false
    },
    changePopupView(){
        this.setData({popupView:!this.data.popupView})
    }
})

WXSS

.popupView{
    width: 100vw;
    height: calc(100vh - 50px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    overflow: hidden;
}
.popupView .close{
    flex-grow: 1;
    background-color: rgba(41, 41, 41, 0.699);
}
.popupView .content{
    background-color: #f5f5f5;
    padding: 15rpx;
}