关于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-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>

样式

css 复制代码

<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机型上，有时候点击没反应。刚开始以为是不兼容，但是在某些情况下又能切换，所以排除了不兼容的情况，多次试验以后，发现在排队列表没有数据的情况下，可以切换，有数据的情况下，不能切换

经过排查，一个一个修改，试验，是一个样式引起的问题

css 复制代码

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

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