微信小程序wepy框架下的页面显示/隐藏

版权声明：转载请标明出处 https://blog.csdn.net/qq_41155191/article/details/90240399

<view class="m-modal" hidden='{{flag}}'>
      <view class="m-free">
        <image class="free-close" src="../../assets/images/close-2.png" @tap="closeFlag"></image>
        <image class="free-img" src="../../assets/images/v-free.png"></image>
        <text class="free-tit">关注公众号，免费观看视频</text>
        <text class="free-txt">青柠健康，让你每天健康一点，微信搜索公众号guangzhouhaici，立即关注</text>

      </view>
</view>

.m-modal{
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    flex-direction: column;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
  }
  .m-free{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 600rpx;
    height: 648rpx;
    background-color: white;
    border-radius: 10rpx;
    .free-close{
      width: 26rpx;
      height: 26rpx;
      margin-top: 20rpx;
      margin-left: 544rpx;
    }
    .free-img{
      width: 320rpx;
      height: 219rpx;
      margin: 0 140rpx 20rpx;
    }
    text{
      text-align: center;
      padding: 20rpx 42rpx 0;
    }
    .free-tit{
      //font-size: 34rpx;
      color: #2D2D2D;
    }
    .free-txt{
      font-size: 28rpx;
      color: #696969;
    }

  }

hidden的设置：false显示，true隐藏 

data = {
      flag:false
}

methods = {

      closeFlag:function () {
        this.flag = true
      }
}