当前位置: 首页 > news >正文

关于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有冲突,会出现点击没反应的问题

相关文章:

关于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" :…...

一零七一、Spring大海捞针篇

IOC&#xff0c;AOP&#xff1f; IOC&#xff08;控制反转&#xff09;是一种设计模式&#xff0c;它将对象的创建、依赖注入和管理交给了容器来完成&#xff0c;而不是由开发者手动管理。 这样做的好处是降低了组件之间的耦合度&#xff0c;提高了代码的可维护性和可扩展性。 …...

请求并发控制

请求并发数量控制 并发限制 要求&#xff1a;多个请求做并发限制&#xff0c;请求完成后执行回调 思路&#xff1a; 首次循环启动能够执行的任务 取出能执行的任务推入执行器执行 执行器更新当前并发数&#xff0c;并且再请求完成时继续取出任务推入执行器 当所有请求完…...

创建密码库/创建用户帐户/更新 Ansible 库的密钥/ 配置cron作业

目录 创建密码库 创建用户帐户 更新 Ansible 库的密钥 配置cron作业 创建密码库 按照下方所述&#xff0c;创建一个 Ansible 库来存储用户密码&#xff1a; 库名称为 /home/curtis/ansible/locker.yml 库中含有两个变量&#xff0c;名称如下&#xff1a; pw_developer&#…...

vue实现穿梭框,ctrl多选,shift多选

效果图 代码 <template><div class"container"><!--左侧--><div><div class"title">{{ titles[0] }}</div><div class"layerContainer"><div v-for"item in leftLayerArray":key"…...

Win11中zookeeper的下载与安装

下载步骤 打开浏览器&#xff0c;前往 Apache ZooKeeper 的官方网站&#xff1a;zookeeper官方。在主页上点击"Project"选项&#xff0c;并点击"Release" 点击Download按钮&#xff0c;跳转到下载目录 在下载页面中&#xff0c;选择版本号&#xff0c;并点…...

ubuntu22.04 找不到串口,串口ttyusb时断时续的问题(拔插以后能检测到,过会儿就检测不到了)

1. 问题描述 ubuntu22.04的PC&#xff0c;在连接USB串口的时候&#xff0c;有时能找到ttyUSB0,有时找不到&#xff0c;如下&#xff1a; base) airsairs-Precision-3630-Tower:~$ ls -l /dev/ttyUSB* crwxrwxrwx 1 root dialout 188, 0 Aug 17 16:36 /dev/ttyUSB0 (base) air…...

Pinia基础教程

Pinia wiki Pinia 起始于 2019 年 11 月左右的一次实验&#xff0c;其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起&#xff0c;我们就倾向于同时支持 Vue 2 和 Vue 3&#xff0c;并且不强制要求开发者使用组合式 API&#xff0c;我们的初心至今没有改变。除了安…...

【NOIP】标题统计

author&#xff1a;&Carlton tags&#xff1a;模拟&#xff0c;字符串 topic&#xff1a;【NOIP】标题统计 language&#xff1a;C website&#xff1a;P5015 [NOIP2018 普及组] 标题统计 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) date&#xff1a;2023年8月20日…...

BOXTRADE-天启量化分析平台 系统功能预览

BOXTRADE-天启量化分析平台 系统功能预览 系统功能预览 1.登录 首页 参考登录文档 2. A股 行情与策略分析 2.1 A股股票列表 可以筛选和搜索 2.2 A股行情及策略回测 2.2.1 行情数据提供除权和前复权&#xff0c;后复权数据&#xff1b;外链公司信息 2.2.2 内置策略执行结果…...

解决Kibana(OpenSearch)某些字段无法搜索问题

背景 最近在OpenSearch查看线上日志的时候&#xff0c;发现某个索引下有些字段无法直接在界面上筛选&#xff0c;搜索到也不高亮&#xff0c;非常的不方便&#xff0c;就像下面这样 字段左侧两个筛选按钮禁用了无法点击&#xff0c;提示 Unindexed fields can not be searched…...

代码随想录训练营day15|102.层序遍历 226.翻转二叉树 101.对称二叉树

TOC 前言 代码随想录算法训练营day15 一、Leetcode 102.层序遍历 1.题目 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 (即逐层地&#xff0c;从左到右访问所有节点)。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a…...

Nginx 配置https以及wss

一、申请https证书 可以在阿里云申请免费ssl证书&#xff0c;一年更换一次 二、Nginx配置ssl upstream tomcat_web{server 127.0.0.1:8080; }server {listen 443 ssl;server_name www.xxx.com;## 配置日志文件access_log /var/log/nginx/web/xxx-ssl-access.log main;er…...

Log4net在.Net Winform项目中的使用

引言&#xff1a; Log4net是一个流行的日志记录工具&#xff0c;可以帮助开发人员在应用程序中实现高效的日志记录。本文将提供一个详细的分步骤示例&#xff0c;来帮助您在.Net Winform项目中使用Log4net。 目录 一、安装Log4net二、配置Log4net三、在项目中使用Log4net四、初…...

从零到一制作扫雷游戏——C语言

什么是扫雷游戏&#xff1f; 扫雷游戏作为一种老少咸宜的益智游戏&#xff0c; 它的游戏目标十分简单&#xff0c;就是要求玩家在最短的时间内&#xff0c; 根据点击格子之后所出现的数字来找出所有没有炸弹的格子&#xff0c; 同时在找的时候要避免点到炸弹&#xff0c;一…...

Python 数据挖掘与机器学习教程

详情点击链接&#xff1a;Python 数据挖掘与机器学习教程 模块一&#xff1a;Python编程 Python编程入门 1、Python环境搭建&#xff08; 下载、安装与版本选择&#xff09;。 2、如何选择Python编辑器&#xff1f;&#xff08;IDLE、Notepad、PyCharm、Jupyter…&#xff…...

排序小白必读:掌握插入排序的基本原理

一、插入排序是什么&#xff1f; 它是一种简单直观的排序算法。类似于整理扑克牌&#xff0c;想象你手上有一堆未排序的牌&#xff0c;你将它们逐个插入已排序的牌堆中的正确位置。拿起一张牌&#xff0c;与已排序的牌进行比较&#xff0c;将它插入到合适的位置。重复这个过程…...

html常见兼容性问题

1. png24位的图片在iE6浏览器上出现背景 解决方案&#xff1a;做成PNG8&#xff0c;也可以引用一段脚本处理. 2. 浏览器默认的margin和padding不同 解决方案&#xff1a;加一个全局的 *{margin:0;padding:0;} 来统一。 3. IE6双边距bug&#xff1a;在IE6下&#xff0c;如果对…...

Docker实战:docker compose 搭建Redis

1、配置文件准备 redis 配置文件&#xff1a;https://pan.baidu.com/s/1YreI9_1BMh8XRyyV9BH08g2、创建目录并赋权 mkdir -p /home/docker/redis/data /home/redis/logs /home/redis/conf chmod -R 777 /home/docker/redis/data* chmod -R 777 /home/docker/redis/logs*3、re…...

Debian11 Crontab

Crontab用户命令 可执行文件 crontab命令的可执行文件在哪儿&#xff1f; $ which -a crontab /usr/bin/crontab /bin/crontabcrontab命令的可执行文件有2个&#xff1a;/usr/bin/crontab 和 /bin/crontab $ diff /usr/bin/crontab /bin/crontab $diff 发现这两个文件并无区…...

css 文字排版-平铺

序&#xff1a; 1、表格的宽度要有&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 2、容器不能是display:inline 3、扩展---》node全栈框架 代码 text-align-last: justify; width: 70px; display: inline-block; 主要是用于表单左侧文字排序&#xff01;...

把握潮流:服装定制小程序的发展与趋势

随着互联网的快速发展&#xff0c;小程序成为了人们生活中不可或缺的一部分。尤其在服装行业&#xff0c;定制化已经成为了一种趋势。为了满足消费者个性化的需求&#xff0c;服装定制小程序应运而生。 为了方便开发者的设计和制作&#xff0c;我们可以使用第三方的制作平台来创…...

Go 安装配置

介绍Ubuntu20.04 安装和配置Go 可以参考官网的这个为 Go 开发配置Visual Studio Code - Go on Azure | Microsoft Learn 1.安装Go 去这个地方下载Go https://go.dev/doc/install 如果之前安装过&#xff0c;可以参考这个&#xff08;没有可以忽略&#xff09; 下载完成后执…...

镜像底层原理详解和基于Docker file创建镜像

目录 一、镜像底层原理 1.联合文件系统(UnionFS) 2.镜像加载原理 3.为什么Docker里的centos的大小才200M? 二、Dockerfile 1.简介 2.Dockerfile操作常用命令 &#xff08;1&#xff09;FORM 镜像 &#xff08;2&#xff09;MAINTAINER 维护人信息 &#xff08;3&…...

k8s扩缩容与滚动更新

使用kubectl run创建应用 kubectl run kubernetes-bootcamp \> --imagedocker.io/jocatalin/kubernetes-bootcamp:v1 \> --port8080 端口暴露出去 kubectl expose pod kubernetes-bootcamp --type"NodePort" --port 8080 使用kubectl create创建应用 kubect…...

4.小程序的运行机制

启动过程 把小程序的代码包下载到本地解析app.json全局配置文件执行app.js小程序入口文件&#xff0c;调用App()创建小程序的实例渲染小程序首页小程序启动完成 页面渲染过程 加载解析页面的.json配置文件加载页面.wxml模板和.scss样式执行页面的.ts文件&#xff0c;调用Pag…...

基于 Vercel TiDB Serverless 的 chatbot

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

Android 多渠道打包及VasDolly使用

目录 1.添加productFlavors的配置buildConfigFieldmanifestPlaceholdersresValue 2.设置apk文件的名称&#xff0c;便于识别3.添加vasdolly、添加gradle脚本&#xff08;windows&#xff09; 作用&#xff1a;一次性可以打多个apk包&#xff0c;名字、包名、logo等可以不相同。…...

LeetCode 42题:接雨水

题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1,…...

spring boot 提示:程序包不存在,解决方法总结

背景&#xff1a; 之前出现过这样的问题&#xff0c;打包安装父项目就好了&#xff0c;今天改了一下代码&#xff0c;重新编译的时候&#xff0c;又出现了这样的情况&#xff0c;决定深度挖掘一下这里面的问题 spring boot 提示&#xff1a;程序包不存在&#xff0c;解决方法总…...

docker项目实战

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘 1&#xff09;拉取mysql:5.6和owncloud镜像 [rootmaster ~]# docker pull mysql:5.6 5.6: Pulling from library/mysql 35b2232c987e: Pull complete fc55c00e48f2: Pull complete 0030405130e3: Pull compl…...

银行客户关系管理系统springboot财务金融进销存java jsp源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 银行客户关系管理系统springboot 系统有1权限&#x…...

Maven 插件 maven-antrun-plugin 执行 ant 脚本

Ant 相信大家都不陌生&#xff0c;你可以把它理解为使用 xml 格式描述的一系列命令处理工具。它是一种基于Java的build工具。理论上来说&#xff0c;它有些类似于&#xff08;Unix&#xff09;C中的make、有些类似于基于shell命令编写的sh脚本文件。Ant 用 Java 的类来扩展。&a…...

【仿写框架之仿写Tomact】四、封装HttpRequest对象(属性映射http请求报文)、HttpResponse对象(属性映射http响应报文)

文章目录 1、创建HttpRequest对象2、创建HttpResponse对象 1、创建HttpRequest对象 HttpRequest对象中的属性与HTTP协议中的内容对应&#xff0c;用于后序servlet从request中获取请求中的参数。 参照http请求报文&#xff1a; import java.io.BufferedReader; import java…...

LeetCode 41题:缺失的第一个正数

目录 题目 思路 代码 题目 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3示例 2&#xff…...

学单片机有什么用?

单片机简而言之就是一个小计算机系统&#xff0c;它已经应用到了我们生活中的方方面面。单片机比专用处理器适合应用于嵌入式系统&#xff0c;因此它得到了多的应用&#xff0c;事实上单片机是世界上数量多的计算机。 现代人类生活中所用的几乎每件电子和机械产品中都会集成有单…...

Go 1.21新增的 slices 包详解(二)

Go 1.21新增的 slices 包提供了很多和切片相关的函数&#xff0c;可以用于任何类型的切片。 slices.Delete 定义如下&#xff1a; func Delete[S ~[]E, E any](s S, i, j int) S 从 s 中删除元素 s[i:j]&#xff0c;返回修改后的切片。如果 s[i:j] 不是 s 的有效切片&#…...

解决charles无法抓取localhost数据包

我们有时候在本地调试的时候&#xff0c;使用charles抓取向本地服务发送的请求的&#xff0c;发现无法抓取。 charles官方也作了相应说明&#xff1a; 大概意思就是 某些系统使用的是硬编码不能使用localhost进行传输&#xff0c;所以当我们连接到 localhost的时候&#xff0c…...

基于注解优雅的实现接口幂等性

一、什么是幂等性 简单来说&#xff0c;就是对一个接口执行重复的多次请求&#xff0c;与一次请求所产生的结果是相同的&#xff0c;听起来非常容易理解&#xff0c;但要真正的在系统中要始终保持这个目标&#xff0c;是需要很严谨的设计的&#xff0c;在实际的生产环境下&…...

flutter:webview_flutter和flutter_inappwebview的简单使用

前言 最近在研究如何在应用程序中嵌入Web视图&#xff0c;发现有两个库不错。 一个是官方维护、一个是第三方维护。因为没说特别的需求&#xff0c;就使用了官方库&#xff0c;实现一些简单功能是完全ok的 webview_flutter 不建议使用&#xff0c;因为效果不怎么样&#xf…...

opencv进阶09-视频处理cv2.VideoCapture示例(打开本机电脑摄像头)

视频信号&#xff08;以下简称为视频&#xff09;是非常重要的视觉信息来源&#xff0c;它是视觉处理过程中经常要处理的一类信号。实际上&#xff0c;视频是由一系列图像构成的&#xff0c;这一系列图像被称为帧&#xff0c;帧是以固定的时间间隔从视频中获取的。获取&#xf…...

大语言模型与语义搜索;钉钉个人版启动内测,提供多项AI服务

&#x1f989; AI新闻 &#x1f680; 钉钉个人版启动内测&#xff0c;提供多项AI服务 摘要&#xff1a;钉钉个人版正式开始内测&#xff0c;面向小团队、个人用户、高校大学生等人群。该版本具有AI为核心的功能&#xff0c;包括文生文AI、文生图AI和角色化对话等。用户可通过…...

小程序-基于vant的Picker组件实现省市区选择

一、原因 因vant/area-data部分的市/区数据跟后台使用的高德/腾讯省市区有所出入&#xff0c;故须保持跟后台用同一份数据&#xff0c;所以考虑以下几个组件 1、Area 2、Cascader 3、Picker 因为使用的是高德地图的省市区json文件&#xff0c;用area的话修改结构代价太大&…...

智慧水利利用4G物联网技术实现远程监测、控制、管理

智慧水利工业路由器是集合数据采集、实时监控、远程管理的4G物联网通讯设备&#xff0c;能够让传统水利系统实现智能化的实时监控和远程管理。工业路由器利用4G无线网络技术&#xff0c;能够实时传输数据和终端信息&#xff0c;为水利系统的运维提供有效的支持。 智慧水利系统是…...

sql server Varchar转换为Datetime

将Varchar转换为Datetime是一个常见的需求&#xff0c;在处理日期和时间数据时特别有用。在SQL Server中&#xff0c;可以使用CONVERT函数或CAST函数将Varchar转换为Datetime。 使用CONVERT函数 CONVERT函数可以将一个值从一个类型转换为另一个类型。以下是使用CONVERT函数将…...

什么文件传输协议才能保障跨国文件传输安全又稳定

在当今的全球化时代&#xff0c;跨国文件传输是一种常见而又重要的需求&#xff0c;无论是个人还是企业&#xff0c;都需要通过网络来分享和交换各种类型和大小的文件。但是&#xff0c;跨国文件传输也面临着许多挑战和风险&#xff0c;如何选择一个合适的文件传输协议&#xf…...

LeetCode笔记:Weekly Contest 359

LeetCode笔记&#xff1a;Weekly Contest 359 1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 1. 解题思路2. 代码实现 比赛链接&#xff1a;https://leetcode.com/contest/weekly-contest-359 1. 题目一 …...

使用Java和ChatGPT Api来创建自己的大模型聊天机器人

文章目录 前言ChatGPT Api简析Chatfunction call Embeddings 制作机器人上下文向量数据库 更多场景介绍扩展阅读 前言 什么是大模型&#xff1f; 大型语言模型&#xff08;LLM&#xff09;是一种深度学习模型&#xff0c;它使用大量数据进行预训练&#xff0c;并能够通过提示工…...

Maven介绍_下载_安装_使用_原理

文章目录 1 Maven介绍1.1 Maven是介绍1.2 Maven的作用 2 Maven下载与安装2.1 官网下载2.2 文件目录2.3 环境配置 3 Maven基础概念3.1 仓库分类3.2 依赖坐标3.3 坐标组成 4 Maven配置4.1 本地仓库配置4.2 远程仓库的设置4.3 镜像仓库配置4.4 IDEA配置Maven 5 Maven项目创建5.1 M…...

算法通关村十一关 | 位运算的规则

1.数字在计算机中的表示 机器数&#xff1a;一个数在计算机中的二进制表示形式&#xff0c;叫做这个数的机器数。机器数是自带符号的&#xff0c;在计算机用一个数的最高位存放符号&#xff0c;整数为0&#xff0c;负数为1。比如&#xff0c;十进制中的数3&#xff0c;计算机字…...