1、使用page-container前先在pages.json配置(重點(diǎn)!)
"usingConponents":{
"page-container":"/pages/detail/detail"
},
2、在頁(yè)面中配置
<page-container :show="true" :close-on-slideDown="false" :overlay="false" :duration="false"
style="z-index: 99;width: 100%; overflow: auto;height:100vh"@touchstart.native="onTouchStart"
@touchmove.native="onTouchEnd">
<view style="z-index: 999;pointer-events:auto"> //頁(yè)面內(nèi)容
</page-container>
@touchstart.native和@touchmove.native是用于遮罩層滑動(dòng)的監(jiān)聽(tīng)事件
//觸摸事件(開(kāi)始)
onTouchStart(e) {
this.isShow = true
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY
},
//觸摸事件(結(jié)束)
onTouchEnd(e) {
this.endX = e.changedTouches[0].clientX // 觸摸終點(diǎn)
const subX = this.startX - this.endX // 觸摸滑動(dòng)距離
if (subX > 50 || subX < -50) {
//滑動(dòng)一定范圍后操作,彈出彈窗或者提示
}
},
關(guān)于page-container 的一些屬性
詳細(xì)可以按照官方文檔:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-509798.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-509798.html
到了這里,關(guān)于小程序阻止手機(jī)自帶的滑動(dòng)返回退出事件(uni-app,微信小程序,page-container)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!