第一步:
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
},
效果杠杠的!!!具体的业务需求可以自行调整哈