H5 van-popup全屏弹窗,模拟页面回退效果,支持左上角返回按钮,适用物理返回,侧滑与底部返回键

第一步:
1、定义animateDuration变量
2、定义open事件执行方法selectProjectOpenHandler
3、定义close事件执行方法selectProjectCloseHandler

data () {
    return {
      animateDuration: 0.3 // 默认弹窗动画时间0.3s
    }
},

第二步:van-popup使用:

<!-- van-popup  -->
 <van-popup 
    v-model="_show" 
    position="right" 
    :overlay="false"
   :style="{ width: '100%', height: '100%' }" 
   :duration="animateDuration" 
    @open="selectProjectOpenHandler" 
    @close="selectProjectCloseHandler">
                    <!-- 弹窗内容 -->
</van-popup>

第三步:
selectProjectOpenHandler:

// popup打开
selectProjectOpenHandler () {
  window.history.pushState(null, null, '#') // 模拟新的一页history记录
  window.addEventListener('popstate', this.popstateHandler) //添加popstate事件监听
}
popstateHandler (e) {
 	this.animateDuration = 0 // 防止侧滑出现多次动画
  	this._show = false //关闭van-popup
}

selectProjectCloseHandler:

// popup关闭
selectProjectCloseHandler () {
    window.removeEventListener('popstate', this.popstateHandler, false)
},

第四步:按钮返回的方法goBack (重要!)

goBack () {
  window.history.back() // 删掉van-popup打开时添加的history
  this._show = false
},

效果杠杠的!!!具体的业务需求可以自行调整哈

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值