关于vant2 组件van-dropdown-item,在IOS手机上,特定条件下无法点击问题的探讨

情景重现

先贴有问题的代码

<template><div :class="showBar ? 'homeContain' : 'homeContain-nobar'"><div class="contant" id="content"><van-dialog v-model="loading" :before-close="onBeforeClose" :show-confirm-button="false"><div style="text-align: center; line-height: 100px"><van-loading size="24px">加载中...</van-loading></div></van-dialog><div><div class="contian-title-div"><div style="display: flex"><div class="contain-title">{{ hospitalName }}</div><van-dropdown-menu style="flex: 1"><van-dropdown-itemv-model="valueUserName":options="optionUserName"@change="userNameChange"/></van-dropdown-menu></div></div><div v-if="list.length === 0"><div class="text-center" style="padding-top: 60px; height: 70vh"><div class="back-white pad-16 border-r-10"><img src="@/assets/images/room/noHos.png" width="150" /><h3>暂无排队记录</h3></div></div></div><div style="display: flex; flex-direction: column" v-else><div style="overflow-y: scroll; height: 72vh"><van-list@load="onLoad"style="margin: 10px; flex: 2 1 0%; margin-top: 1.6rem"><divclass="back-white pad-16 border-r-10"style="margin: 1em 0 0 0"v-for="item in list":key="item.id"><div><imgsrc="@/assets/images/icon/boy.png"class="contain-img"v-if="userSex === 1"/><imgsrc="@/assets/images/icon/girl.png"class="contain-img"v-if="userSex === 2"/><div style="display: flex; padding: 8px"><div class="contain-div1"><div class="contain-name">{{ item.patientName }}</div><divclass="gray-9"style="font-size: 14px"v-if="userPhone">{{userPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</div></div><div class="contain-div-right"><div class="contain-name">{{ item.deptName }}</div><div class="gray-9" style="font-size: 14px">{{ item.orgName }}</div></div></div></div><div class="boxcard" style="margin-top: 10px"><div><divclass="div-notice"style="  margin-bottom: 10px;"v-if="item.seeNo - item.seeingNo > 0">{{ item.seeingName }} {{ item.seeingNo }} {{ item.seeingDocTime?'('+item.seeingDocTime+')':'' }}</div><divstyle="text-align: center"class="gray-9">当前叫号</div></div><div><divclass="div-notice"v-if="item.seeNo - item.seeingNo < 0">现已过您的号码, <br>如有疑问请咨询服务台</div><divclass="div-notice"v-if="item.seeNo - item.seeingNo == 0">请至{{ item.deptName }}诊室就诊</div><div style="text-align: center" class="gray-9"></div></div><van-row style="margin-top: 10px"><van-col span="12">您的号码:{{ item.seeNo }}</van-col><van-colspan="12"style="align-items: flex-end;display: flex;flex-direction: column;">预约时间: {{ item.seeDocTime?item.seeDocTime:'-:-' }}</van-col></van-row></div></div></van-list></div></div><div style="margin: 20px"><van-buttonroundblocktype="primary"@click="refreshList()":loading="submitBol"loading-text="刷新中...">刷新</van-button><div class="last-fresh-time" v-if="lastRefreshTime">最后刷新时间:{{ lastRefreshTime }}</div></div></div></div></div>
</template>

样式

<style scoped>
.last-fresh-time {display: flex;justify-content: center;margin: 10px;font-size: 12px;color: #9b9b9b;
}.contian-title-div {position: fixed;width: 100%;line-height: 0.58667rem;background: #fff;
}
.contain-title {flex: 1 1 0%;background-color: #fff;position: relative;align-items: center;display: flex;justify-content: center;color: #323233;font-size: 14px;line-height: 0.58667rem;
}
.contain-img {height: 45px;width: 45px;border-radius: 50%;float: left;margin-right: 5px;
}
.contain-name {font-size: 14px;font-weight: 600;
}
.contain-div1 {flex: 1;margin-left: 5px;
}
.contain-div-right {flex: 1;margin-right: 5px;align-items: flex-end;display: flex;flex-direction: column;
}
.contant {padding: 0;
}
.van-dropdown-menu >>> .van-dropdown-menu__bar {box-shadow: 0 0 0;
}.div-notice {text-align: center;font-size: 18px;font-weight: 550;margin-top: 20px;margin-bottom: 20px;
}
</style>

van-dropdown-menu >>> .van-dropdown-menu__bar

这一行是对组件内的样式进行了修改
上个图直观一些
在这里插入图片描述

在这里插入图片描述
右上角人名可以切换,用到的就是van-dropdown-menu,这个在web,在android,都没有问题,但是在IOS机型上,有时候点击没反应。刚开始以为是不兼容,但是在某些情况下又能切换,所以排除了不兼容的情况,多次试验以后,发现在排队列表没有数据的情况下,可以切换,有数据的情况下,不能切换
经过排查,一个一个修改,试验,是一个样式引起的问题

.contian-title-div {position: fixed;width: 100%;line-height: 0.58667rem;background: #fff;
}

把这个 position: fixed;删掉,在IOS上,和van-dropdown-menu有冲突,会出现点击没反应的问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44888.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git merge规则

参考文档&#xff1a;https://juejin.cn/post/7129333439299321887 丹尼尔&#xff1a;Hi&#xff0c;蛋兄&#xff0c;周杰伦都出新专辑了&#xff0c;你咋还不更新啊&#xff0c;真的打算半年一更啊&#xff1f; 蛋先生&#xff1a;好像确实是这样&#xff0c;要不&#xff0…

不要着急购买iPhone 15,先看看这5点再做决定吧!

人们对下个月可能推出的iPhone 15感到兴奋,这是有充分理由的——有传言称,新机型正在做出一些重大改变,尤其是在iPhone 15 Pro机型方面。从四款新iPhone都采用USB-C,到iPhone 15 Pro Max采用潜望镜式长焦镜头以实现更好的变焦,听起来有很多功能值得兴奋。 当然,除非你没…

OpenCV图片校正

OpenCV图片校正 背景几种校正方法1.傅里叶变换 霍夫变换 直线 角度 旋转3.四点透视 角度 旋转4.检测矩形轮廓 角度 旋转参考 背景 遇到偏的图片想要校正成水平或者垂直的。 几种校正方法 对于倾斜的图片通过矫正可以得到水平的图片。一般有如下几种基于opencv的组合方…

探索Chevereto图床:使用Docker Compose快速搭建个人图床

家人们!图片在今天的社交媒体、博客和论坛中扮演着至关重要的角色。然而&#xff0c;随着图片数量的增加&#xff0c;寻找一个可靠的图片托管解决方案变得越来越重要。Chevereto图床是一个备受赞誉的解决方案&#xff0c;而使用Docker Compose搭建它更是一种高效、可维护的方法…

UE4中关于利用粒子系统做轨迹描绘导致系统流畅性下降的问题

UE4中关于利用粒子系统做轨迹描绘导致系统流畅性下降的问题 文章目录 UE4中关于利用粒子系统做轨迹描绘导致系统流畅性下降的问题前言假设及验证1. 过多的粒子发射器影响仿真系统2. 粒子数目太多&#xff0c;降低粒子发射频率&#xff0c;同时增大粒子显示范围3. 把信息输出到屏…

matlab 点云最小二乘拟合空间直线(方法一)

目录 一、算法原理1、空间直线2、最小二乘法拟合二、代码实现三、结果展示四、可视化参考本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、空间直线 x

基于 Vercel TiDB Serverless 的 chatbot

作者&#xff1a; shiyuhang0 原文来源&#xff1a; https://tidb.net/blog/7b5fcdc9 # 前言 TiDB Serverless 去年就有和 Vercel 的集成了&#xff0c;同时还有一个 bookstore template 方便大家体验。但个人感觉 bookstore 不够炫酷&#xff0c;借 2023 TiDB hackthon 的…

07_缓存预热缓存雪崩缓存击穿缓存穿透

缓存预热&缓存雪崩&缓存击穿&缓存穿透 一、缓存预热 提前将数据从数据库同步到redis。 在程序启动的时候&#xff0c;直接将数据刷新到redis懒加载&#xff0c;用户访问的时候&#xff0c;第一次查询数据库&#xff0c;然后将数据写入redis 二、缓存雪崩 发生情…

【排排站:探索数据结构中的队列奇象】

本章重点 队列的概念及结构 队列的实现方式 链表方式实现栈接口 队列面试题 一、队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 FIFO(First In First Out) 入队列&#x…

“RFID与光伏板的完美融合:探索能源科技的新时代!“

随着科技的不断发展&#xff0c;人类创造出了许多令人惊叹的发明。其中&#xff0c;RFID&#xff08;Radio Frequency Identification&#xff09;技术的应用在各个领域日益广泛。最近的研究表明&#xff0c;将RFID技术应用于光伏板领域&#xff0c;不仅可以提高光伏板的效率&a…

JVM中分代回收机制

为什么要分为新生代和老年代&#xff1f; 分为新生代&#xff08;Young Generation&#xff09;和老年代&#xff08;Old Generation&#xff09;是为了更有效地管理和优化内存的使用。 新生代主要存放生命周期较短的对象&#xff0c;例如方法的局部变量、临时变量等。由于这…

【Golang系统开发】搜索引擎(2) 压缩词典

写在前面 这篇文章我们就给出一系列的数据结构&#xff0c;使得词典能达到越来越高的压缩比。当然&#xff0c;和倒排索引记录表的大小相比&#xff0c;词典只占据了非常小的空间。那么为什么要对词典进行压缩呢&#xff1f; 这是因为决定信息检索系统的查询响应时间的一个重…

李沐pytorch学习-卷积网络及其实现

一、卷积概述 1.1 基本定义 卷积计算过程如图1所示&#xff0c;即输入矩阵和核函数&#xff08;filter&#xff09;对应的位置相乘&#xff0c;然后相加得到输出对应位置的数。 图1. 卷积计算过程 该过程可以形象地从图2中展现。 图2. 二维卷积示意图 1.2 实现互相关运算的代…

Python tkinter Notebook标签添加关闭按钮元素,及左侧添加存储状态提示图标案例,类似Notepad++页面

效果图展示 粉色框是当前页面&#xff0c;橙色框是鼠标经过&#xff0c;红色框是按下按钮&#xff0c;灰色按钮是其他页面的效果&#xff1b; 存储标识可以用来识别页面是否存储&#xff1a;例如当前页面已经保存用蓝色&#xff0c;未保存用红色&#xff0c;其他页面已经保存用…

2023最新版本~KEIL5使用C++开发STM32

先看效果 开始教学 因为是第一次写这个配置教程 我会尽量详细些 打开一个Keil工程 移除本地core 添加在线core 第一次编译代码 不会有报错 修改main.c文件类型为C 点击魔术棒 把ARM编译器修改为V6 第二次编译会报错语法不兼容 我把汇编部分的这些代码做了…

基于IMX6ULLmini的linux裸机开发系列九:时钟控制模块

时钟控制模块 核心 4个层次配置芯片时钟 晶振时钟 PLL与PFD时钟 PLL选择时钟 根时钟/外设时钟 系统时钟来源 RTC时钟源&#xff1a;32.768KHz 系统时钟&#xff1a;24MHz&#xff0c;作为芯片的主晶振使用 PLL和PFD倍频时钟 7路锁相环电路&#xff08;每个锁相环电路…

【IMX6ULL驱动开发学习】05.字符设备驱动开发模板(包括读写函数、poll机制、异步通知、定时器、中断、自动创建设备节点和环形缓冲区)

一、 字符设备驱动简介 字符设备是Linux驱动中最基本的一类设备驱动&#xff0c;字符设备就是一个一个字节&#xff0c;按照字节流进行读写操作的设备&#xff0c;读写数据是分先后顺序的。比如常见的点灯、按键、IIC、SPI、LCD 等等都是字符设备&#xff0c;这些设备的驱动就叫…

centos8 使用phpstudy安装tomcat部署web项目

系统配置 1、安装Tomcat 2、问题 正常安装完Tomcat应该有个配置选项&#xff0c;用来配置server.xml web.xml 还有映射webapps路径选项&#xff0c;但是我用的这个版本并没有。所以只能曲线救国。 3、解决 既然没有配置项&#xff0c;那就只能按最基本的方法配置&#xff0c…

关于Coursera网站视频无法观看

文章目录 前言找Ip 改hosts验证 前言 众所周知&#xff0c;coursera是很不错的学习网站&#xff0c;但由于国内访问限制&#xff0c;导致我的学习之路举步维艰 在科学上网彻底崩盘后&#xff0c;终于断了我的学习热情&#xff08;真的很想骂人&#xff09; 网站只能登入&#…

【无标题】WIN11下 ESP8266 _RTOS_SDK3.0以上开发环境搭建(记录及避坑必看)

前提参考文档 1、乐鑫官网&#xff1a; https://docs.espressif.com/projects/esp8266-rtos-sdk/en/latest/get-started/index.html 官网上有如何搭建windows linux macos 三种环境&#xff0c;以及如何配置Eclipse去编译和开发项目&#xff08;如何安装Eclipse环境&#xff0…