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
},

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


版权声明:本文为zthtt原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。