【uniapp 中使用uni-popup阻止左滑退出程序】

这篇具有很好参考价值的文章主要介绍了【uniapp 中使用uni-popup阻止左滑退出程序】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在uniapp中,可以使用uni-app插件uni-popup提供的阻止左滑退出程序的功能。具体步骤如下:

  1. 安装uni-popup插件:在HBuilderX编辑器中,打开manifest.json文件,找到“dependencies”字段,在其后添加:

“uni-popup”: “^1.4.3”

保存并关闭文件后,HBuilderX会自动安装插件。

  1. 在APP.vue中引入uni-popup插件:
import uniPopup from '@/uni-popup/uni-popup.vue';
export default {
  components: {
    uniPopup
  }
}
  1. 在APP.vue中注册全局事件监听器,监听左滑事件:
onLaunch() {
  let self = this;
  uni.onGlobalSwipe('right', function (event) {
    self.$refs.popup.show();
  });
}

此代码在应用程序启动时注册了一个全局左滑事件监听器,在左滑时,显示一个弹出框来阻止退出程序。

  1. 在APP.vue中添加阻止退出程序的弹出框:
<uni-popup ref="popup" position="bottom" :duration="300" :popup-style="{height: '160rpx', background: '#fff'}">
  <view style="text-align: center; font-size: 28rpx; color: #333; line-height: 160rpx;">请使用应用内返回按钮</view>
</uni-popup>

其中,需要注意的是,这个弹出框的高度应该根据实际情况进行设置,以适配不同的屏幕尺寸。文章来源地址https://www.toymoban.com/news/detail-649304.html

到了这里,关于【uniapp 中使用uni-popup阻止左滑退出程序】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 微信小程序开发uni-popup弹出层触摸穿透问题解决

    问题现象:        目前小程序弹出层穿透有两种问题: 第一种:小程序弹出层不滚动的时候,往上下拉时会连页面一起拉动,这个用户体验性很差的。 解决办法一: 在uni-popup标签中,增加catchtouchmoves属性 ,就ok了~ Tip:在微信开发者工具上无效,只对真机有效的,所以

    2024年04月15日
    浏览(46)
  • 小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)

    小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)

    1、使用page-container前先在pages.json配置(重点!) 2、在页面中配置 @touchstart.native和@touchmove.native是用于遮罩层滑动的监听事件 关于page-container 的一些属性 详细可以按照官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

    2024年02月11日
    浏览(53)
  • uniapp开发小程序-显示左滑删除效果
  • uniapp小程序手写封装popup弹窗message提醒框组件

    uniapp小程序手写封装popup弹窗message提醒框组件

    在写uniapp小程序的时候,弹窗提醒经常会用到,虽然弹窗的组件很多,但是通常别人封装好的弹窗组件自定义度不高,很难匹配自己的ui需求。所以本篇文章教大家封装自己的弹窗提醒组件 取消和确认按钮的点击事件使用$emit传事件。中间的文字部分接收父组件的传值。 css大

    2024年02月11日
    浏览(41)
  • uniapp微信小程序中阻止事件冒泡

    uniapp微信小程序中阻止事件冒泡

    开发场景:列表中展示地块的数据信息,用户可以点击列表进入地块的详情界面,也可以点击列表中的星星按钮进行收藏 遇到的问题:每次点击星星的时候,都会触发父级的点击事件,从而进入到详情界面 原本的代码: 我原本想到可以使用 @click.stop 用来阻止时间冒泡,但是

    2024年02月02日
    浏览(56)
  • uniapp开发微信小程序阻止事件冒泡

    uniapp开发微信小程序阻止事件冒泡

        最近在使用uniapp去开发微信小程序     其中不乏遇到一些问题,我都会发出来。     万一自己别的时候忘记,但是需要用了。   uniapp中开发微信小程序,当使用  @click.stop     去阻止事件冒泡的时候 会发现, @click.stop  并没有生效,就很神奇 问题如图: 解决问题方案

    2024年02月12日
    浏览(43)
  • uniapp组件库Popup 弹出层 的使用方法

    uniapp组件库Popup 弹出层 的使用方法

    目录 #平台差异说明 #基本使用 #设置弹出层的方向 #设置弹出层的圆角 #控制弹窗的宽度 | 高度 #内容局部滚动 #API #Props #Event 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义 #平台差异说明 App H5 微信小

    2024年01月21日
    浏览(19)
  • uniapp 使用 uni-data-picker级联选择器,自定义展示,uni小程序

    uniapp 使用 uni-data-picker级联选择器,自定义展示,uni小程序

    先看效果是不是你要的效果 页面组件 接口数据 接口数据以及处理方式 选中后的数据处理,拿到选中的值

    2024年02月05日
    浏览(48)
  • uniapp小程序点击输入框时阻止弹出软键盘

    uniapp小程序点击输入框时阻止弹出软键盘

    如果不需要监听输入框的话可以直接看解决方式3  本人如此 解决方式1:@click更换成@tap 但如果同时子元素是开关等  各需要各的功能的话  解决方式2: 使用微信官方api阻止键盘弹出  hideKeyboard() 解决方式3: 最简单暴力百分百不弹出的方法在此  设置disabled

    2024年02月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包