情景重现
先贴有问题的代码
<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-item
v-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"
>
<div
class="back-white pad-16 border-r-10"
style="margin: 1em 0 0 0"
v-for="item in list"
:key="item.id"
>
<div>
<img
src="@/assets/images/icon/boy.png"
class="contain-img"
v-if="userSex === 1"
/>
<img
src="@/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>
<div
class="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>
<div
class="div-notice"
style=" margin-bottom: 10px;"
v-if="item.seeNo - item.seeingNo > 0"
>
{{ item.seeingName }} {{ item.seeingNo }} {{ item.seeingDocTime?'('+item.seeingDocTime+')':'' }}
</div>
<div
style="text-align: center"
class="gray-9"
>
当前叫号
</div>
</div>
<div>
<div
class="div-notice"
v-if="item.seeNo - item.seeingNo < 0"
>
现已过您的号码, <br>如有疑问请咨询服务台
</div>
<div
class="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-col
span="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-button
round
block
type="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机型上，有时候点击没反应。刚开始以为是不兼容，但是在某些情况下又能切换，所以排除了不兼容的情况，多次试验以后，发现在排队列表没有数据的情况下，可以切换，有数据的情况下，不能切换
经过排查，一个一个修改，试验，是一个样式引起的问题文章来源：https://www.toymoban.com/news/detail-651223.html
.contian-title-div {
position: fixed;
width: 100%;
line-height: 0.58667rem;
background: #fff;
}
把这个 position: fixed;删掉，在IOS上，和van-dropdown-menu有冲突，会出现点击没反应的问题文章来源地址https://www.toymoban.com/news/detail-651223.html
到了这里，关于关于vant2 组件van-dropdown-item，在IOS手机上，特定条件下无法点击问题的探讨的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
