BottomSheetDialog 禁止滑动(直接固定不动),解决与弹窗内的地图滑动冲突,并且点击外部关闭

最近又遇到一个小小问题,BottomSheetDialog弹窗总是会滑动,从网上找了一大片解决办法都是解决禁止下滑关闭的问题的,但是还是会有一点点的滑动效果,正好这个一点点的滑动效果遇到了地图----BottomSheetDialog弹窗内添加了一个地图,地图也可以滑动,BottomSheetDialog也可以滑动,这可真是爽歪歪。

首先多说一句如何使用BottomDialog

在这里插入图片描述

 //底部弹窗依赖
    implementation 'com.github.SmartCyl:BottomDialog:1.0.4'

在这里插入图片描述

 maven { url 'https://jitpack.io' }

废话不多说,先上图

在这里插入图片描述
首先写一个类去继承 BottomSheetDialog (下图)

在这里插入图片描述

然后重写(下图),注意!!不要从这个方法里直接去查找布局文件,哪个类里面调用这个方法,通过参数的方式将 布局view 传过来,为禁止滑动埋下伏笔。

在这里插入图片描述
这是在需要用到的类里面去调用自定义的弹窗,并进行一些操作,见下图
在这里插入图片描述
这部分是自定义的弹窗里面的关键代码部分,贴码在最后
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210430110143389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzX3RoaW4=,size_16,color_FFFFFF,t_70

贴码:

自定义的弹窗里面添加(也就是继承BottomSheetDialog 的类里面) 这是禁止滑动的精髓。

 BottomSheetBehavior bottomSheetBehavior;

    public void setmBottomSheetCallback(View sheetView) {
        if (bottomSheetBehavior == null) {
            bottomSheetBehavior = BottomSheetBehavior.from(sheetView);
        }
        bottomSheetBehavior.setBottomSheetCallback(mBottomSheetCallback);
    }

    //此部分为禁止该弹窗可滑动
    private BottomSheetBehavior.BottomSheetCallback mBottomSheetCallback
            = new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet,
                                   @BottomSheetBehavior.State int newState) {
            if (newState == BottomSheetBehavior.STATE_DRAGGING) {//判断为向下拖动行为时,则强制设定状态为展开
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED );
            }
            if (newState == BottomSheetBehavior.STATE_SETTLING ){
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED );
            }
            if (newState == BottomSheetBehavior.STATE_EXPANDED  ){
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED );
            }
            if (newState == BottomSheetBehavior.STATE_COLLAPSED  ){
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED );
            }
            if (newState == BottomSheetBehavior.STATE_HIDDEN   ){
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED );
            }

        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
         //  LogUtil.e(TAG, "onSlide——>" + slideOffset);
        }
    };

调用时的代码(我已进行注释修改):

 //查找布局文件
    View view = LayoutInflater.from(this).inflate(R.layout.弹窗的布局文件,null,false);
    //调用自定义弹窗,并将布局文件传过去
    LocationPopWindow testPopWindow = new LocationPopWindow(this,view);
        //调用禁止滑动方法
        testPopWindow.setmBottomSheetCallback((View) view.getParent());
        //展示弹窗
        testPopWindow.show();
        //通过弹窗查找 弹窗内的控件,即可对控件进行操作
        wv_content = testPopWindow.findViewById(R.id.wv_content);
        //当弹窗关闭时进行操作
        testPopWindow.setOnDismissListener(dialogInterface -> {
              //这里面写弹窗关闭时进行什么样的操作
    });
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在React移端项目中,你可以通过添加CSS样式和使用React组件来禁止滑动。以下是一种常见的方法: 1. 创建一个全局的CSS文件,例如`global.css`,并在你的项目中引入它。 2. 在`global.css`文件中添加以下CSS样式: ```css /* 禁止滑动 */ body { overflow: hidden; } .modal-open { overflow: hidden; position: fixed; width: 100%; } ``` 上述CSS样式会将页面的滚条和滑动行为禁止掉,同时保持内容可滚。 3. 在你的React组件中,使用state来控制的显示与隐藏,并通过条件渲染来添加相应的CSS类名。 ```jsx import React, { useState } from 'react'; import './global.css'; function App() { const [modalOpen, setModalOpen] = useState(false); const openModal = () => { setModalOpen(true); }; const closeModal = () => { setModalOpen(false); }; return ( <div className={modalOpen ? 'modal-open' : ''}> {/* 页面内容 */} <button onClick={openModal}>打开</button> {/* */} {modalOpen && ( <div className="modal"> <h2>内容</h2> <button onClick={closeModal}>关闭</button> </div> )} </div> ); } export default App; ``` 在上述示例中,我们使用了`modalOpen`状态来控制的显示与隐藏。当打开时,给根元素添加`modal-open`类名,这将应用之前定义的CSS样式,禁止页面滑动。 通过点按钮来打开和关闭,并更新`modalOpen`状态。 这样就可以在React移端项目中实现禁止滑动的效果了。记得在修改完配置后重新启应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值