首页 > 其他分享 >vant ActionSheet组件嵌套多层时,第一层的顶部和底部不会被覆盖

vant ActionSheet组件嵌套多层时,第一层的顶部和底部不会被覆盖

时间:2023-04-27 18:22:05浏览次数:29  
标签:vant ActionSheet 第一层 嵌套 底部 按钮 第二层 面板

问题描述:

这是一个只有在ios真机测试的时候才出现的问题,使用浏览器本地调试和安卓真机测试的时候都没有这个问题。
在一个页面中点击一个按钮的时候会出现 ActionSheet 动作面板 这个面板里主要是一个表单需要填写 和确定、取消按钮。 其中有选人组件 这个组件也是用 ActionSheet 动作面板 写的 ,也有选择器。这个时候前一个面板的标题栏和底部按钮还是会悬浮在第二层面板上面。 导致页面样式以及点击按钮方法出错。

解决方案:

  1. 第二层是 ActionSheet 动作面板 遮挡解决方案
    顶部的标题是当第一层面板出现滚动条的时候才会被遮挡 我们考虑到可能是滚动条的原因,或者是样式的问题。(请教了美工小姐姐 建议我们把第二层放在第一层的结构外面单独写样式。 但是由于这些需要在第一层的结构里面填写表单,所以不能按照这种方案)
    同时我们使用元素审查发现 第二层的面板是挂载到第一层里面的。
    且由于时间较为紧张,最后选择的解决方案是: 直接把第二层的面板挂载到body上面,也幸好他有这个属性哈哈哈

    get-container="body"

  2. 底部按钮遮挡解决方案
    思路: 在选择器出现的时候隐藏底部按钮,在选择器关闭后显示底部按钮
    html:

<van-popup v-model="showPicker" round position="bottom" @open="popupOpen" @closed="popupClose">
     <van-picker show-toolbar :columns="linkArray" @cancel="showPicker = false" @confirm="onConfirm" default-index="0"/>
</van-popup>

<div class="woN_btnpar" v-show="bottomBtnShow">
     <van-button @click="onCancel"> 取消</van-button>
     <van-button type="primary" @click="personConfirm">提交</van-button>
</div>

js:

popupOpen() {
      this.bottomBtnShow = false
},
popupClose() {
      this.bottomBtnShow = true
},

标签:vant,ActionSheet,第一层,嵌套,底部,按钮,第二层,面板
From: https://www.cnblogs.com/zhazhaya/p/17359874.html

相关文章

  • golang1.6版本json包解析嵌套指针的问题小记
    指针的指针问题本地跑的好好的,测试环境跑的好好,预发布环境(准线上环境),跪了。起因就是:1a:=&struct{s:""}2json.Unmarshal([]byte{},&a)3fmt.Println(a.s)//报错行第一行代码进行&取地址,获得指针变量。第二行代码,进行json解析的时候,传入了&a, 指针的指针,a到了jso......
  • vant中van-dialog组件点击确认按钮禁止弹窗自动关闭
    1.在van-dialog组件中添加before-close属性,2.定义该方法newGroupBefColse(action,done){if(action=='confirm'&&!this.newFenzuName.trim()){done(false)}else{done(true)}......
  • activity嵌套fragment 并 启动activity
    1.MainActivityFragmentManagerfragmentManager;FragmentTransactiontransaction;privatevoidreplaceFragment(Fragmentfragment){//1.获取FragmentManager,在活动中可以直接通过调用getFragmentManager()方法得到fragmentManager=getSupportFragme......
  • [转]前端传嵌套对象参数给spring mvc
    在使用springmvc开发web应用时,感觉springmvc的controller方法能自动将参数注入到方法的参数对象中,极大的方便了开发。但是,在遇到有嵌套对象的时候,比如订单对象有个属性是用户对象,就不好处理了。一种情况是,传递的参数都是作为post方法的请求体,我们可以用RequestBody注解。但是当条......
  • in(子查询/嵌套查询)
    in的基础用法:in一般用在where的后面,查询一个范围内的数据,如果是notin则查询不在这个范围内的数据select*from(表)where(表达式)in(字段1,字段2。。。)grade表student表   查询grade表中的语文和数学成绩......
  • 【Python】操作复杂嵌套的json数据
    1、相关文章递归获取所有key-value值:https://www.cnblogs.com/phoenixy/p/17126455.html 2、对复杂的json进行增删改查①获取数据#-*-coding:UTF-8-*-importjsonfromjsonpath_ngimportparsefromaa_demo.base.loggerimport*classjson_labor_tools:......
  • 使用vant4+vw创建webapp项目
    包来源自动引入vue/vue-router/vuex等api (ref,toRefs....)npmiunplugin-auto-import--save-devvant按需导入的插件npmiunplugin-vue-components-D使用vw布局替换px单位插件npmipostcss-px-to-viewport--save-dev完整的vite.config.js文件import{......
  • 0002_内部类、静态嵌套类
    内部类、静态嵌套类内部类的一个简单例子如下所示:在外部类中定义了一个非静态内部类"InnerClass",并在该类的方法中实例化并调用了该内部类。publicclassOuterClass{privateintouterVar;publicOuterClass(intvar){outerVar=var;}publi......
  • vue项目结合,vant 实现中轮播图中,点击图片放大图片
    思路:vant中提供函数ImagePreview给原每一个图片子元素设置点击事件,api中提供initial-swipe索引,拿到原图索引设置change事件,保存大图切换的对应索引给到自己的initial-swipe索引中设置图片预览切换时,根据切换后的索引,设置原图的位置,大图原图同步原图片swipeTo(i)切换到......
  • List嵌套排序并取第一个对象
    usingNewtonsoft.Json;using嵌套List排序;//示例listvarexampleString="{\"code\":1,\"msg\":\"[OK]AI诊断成功!\",\"diagnoseJson\":{\"disease\":{\"zhongda\":[[\"胆癌(胆囊癌胆总管癌胆囊肉瘤)\&q......