当前位置: 首页 > 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有冲突,会出现点击没反应的问题

http://www.lryc.cn/news/131897.html

相关文章:

  • 一零七一、Spring大海捞针篇
  • 请求并发控制
  • 创建密码库/创建用户帐户/更新 Ansible 库的密钥/ 配置cron作业
  • vue实现穿梭框,ctrl多选,shift多选
  • Win11中zookeeper的下载与安装
  • ubuntu22.04 找不到串口,串口ttyusb时断时续的问题(拔插以后能检测到,过会儿就检测不到了)
  • Pinia基础教程
  • 【NOIP】标题统计
  • BOXTRADE-天启量化分析平台 系统功能预览
  • 解决Kibana(OpenSearch)某些字段无法搜索问题
  • 代码随想录训练营day15|102.层序遍历 226.翻转二叉树 101.对称二叉树
  • Nginx 配置https以及wss
  • Log4net在.Net Winform项目中的使用
  • 从零到一制作扫雷游戏——C语言
  • Python 数据挖掘与机器学习教程
  • 排序小白必读:掌握插入排序的基本原理
  • html常见兼容性问题
  • Docker实战:docker compose 搭建Redis
  • Debian11 Crontab
  • css 文字排版-平铺
  • 把握潮流:服装定制小程序的发展与趋势
  • Go 安装配置
  • 镜像底层原理详解和基于Docker file创建镜像
  • k8s扩缩容与滚动更新
  • 4.小程序的运行机制
  • 基于 Vercel TiDB Serverless 的 chatbot
  • Android 多渠道打包及VasDolly使用
  • LeetCode 42题:接雨水
  • spring boot 提示:程序包不存在,解决方法总结
  • docker项目实战