微信小程序页面容器弹出层

效果图

.JS

javascript 复制代码
Page({
  data: {
    show: false,
    duration: 300,
    position: 'right',
    round: false,
    overlay: true,
    customStyle: '',
    overlayStyle: ''
  },
  popup(e) {
    const position = e.currentTarget.dataset.position
    let customStyle = ''
    let duration = this.data.duration
    switch(position) {
      case 'top':
      case 'bottom': 
        customStyle = 'height: 30%;'
        break
      case 'right':
        break
    }
    this.setData({
      position,
      show: true,
      customStyle,
      duration
    })
  },
  changeRound() {
    this.setData({round: !this.data.round})
  },
  changeOverlay() {
    this.setData({overlay: !this.data.overlay, show: true})
  },
  changeOverlayStyle(e) {
    let overlayStyle = ''
    const type = e.currentTarget.dataset.type
    switch(type) {
      case 'black':
        overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)'
        break
      case 'white':
        overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)'
        break
      case 'blur':
        overlayStyle = 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);'
    }
    this.setData({overlayStyle, show: true})
  },
  exit() {
    this.setData({show: false})
  },
})

.WXML

xml 复制代码
<view class="title">弹出位置</view>
<view class="box">
  <button class="btn" bindtap="popup" data-position="right">右侧弹出</button>
  <button class="btn" bindtap="popup" data-position="top">顶部弹出</button>
  <button class="btn" bindtap="popup" data-position="bottom">底部弹出</button>
  <button class="btn" bindtap="popup" data-position="center">中央弹出</button>
</view>


<view class="title">弹窗圆角</view>
<view class="box">
  <button class="btn" bindtap="changeRound">设置{{round ? '直角' : '圆角'}}</button>
</view>

<view class="title">遮罩层</view>
<view class="box">
  <button class="btn" bindtap="changeOverlay">设置{{overlay ? '无' : '有'}}遮罩</button>
  <button class="btn" bindtap="changeOverlayStyle" data-type="black">黑色半透明遮罩</button>
  <button class="btn" bindtap="changeOverlayStyle" data-type="white">白色半透明遮罩</button>
  <button class="btn" bindtap="changeOverlayStyle" data-type="blur">模糊遮罩</button>

</view>


<page-container 
  show="{{show}}"
  round="{{round}}"
  overlay="{{overlay}}"
  duration="{{duration}}"
  position="{{position}}"
  close-on-slide-down="{{false}}"
  bindbeforeenter="onBeforeEnter"
  bindenter="onEnter"
  bindafterenter="onAfterEnter"
  bindbeforeleave="onBeforeLeave"
  bindleave="onLeave"
  bindafterleave="onAfterLeave"
  bindclickoverlay="onClickOverlay"
  custom-style="{{customStyle}}"
  overlay-style="{{overlayStyle}}"
>
  <view class="detail-page">
    <button type="primary" bindtap="exit">推出</button>
  </view>
</page-container>

.WXSS

css 复制代码
page {
  background-color: #f7f8fa;
  color: #323232;
  width: 100%;
  height: 100%;
}

.box {
  margin: 0 12px;
}

.title {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}

.btn {
  display: block;
  width: 100%;
  margin: 10px 0;
  background-color: #fff;
}

.detail-page {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。

相关推荐
铲子Zzz6 小时前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
春哥的研究所13 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
Bruce_Json15 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球17 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
The_era_achievs_hero1 天前
微信小程序71~80
微信小程序·小程序
dssxyz1 天前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
澄江静如练_1 天前
微信小程序发体验版
微信小程序·小程序
流口水的兔子2 天前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记2 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
The_era_achievs_hero2 天前
微信小程序61~70
微信小程序·小程序