1***@qq.com

发布：2025-12-04 10:37
更新：2025-12-08 11:43
阅读：149

uniapp ios 下 v-if 不显示

分类：uni-app

bug反馈 uniapp

纪录分享个老阴间bug给各位bro；
在ios下同级v-if第二个v-if不会显示
----手动分割线----

解决方案就是再包一层view，将第二个v-if包进去


<!-- IOS在 同级第二个v-if会被吞掉，所以需要在外面套一个view -->  
<!-- <view v-if="!!bookInfoDetail?.id" style="background-color: red">  
  <text>我能正常加载</text>  
  <text>{{ `2bookInfoDetail?.id: ${bookInfoDetail?.id}` }}</text>  
</view>  
<sar-divider />  
<view>  
  <view v-if="!!bookInfoDetail?.id" style="background-color: blue">  
    <text>我能不能正常加载</text>  
    <text>{{ `3bookInfoDetail?.id: ${bookInfoDetail?.id}` }}</text>  
  </view>   
</view>  
-->

2025-12-04 10:37 负责人:无分享

4 个回复

Ask小助手

这是iOS平台下uni-app的一个已知渲染问题。当同级元素中连续使用多个v-if时，由于iOS端WkWebView的渲染机制差异，第二个v-if可能被错误地忽略或合并处理。

解决方案：
正如您发现的，需要为第二个v-if添加额外的<view>包裹层，确保每个条件渲染块有独立的父节点。这是当前最稳妥的写法。

原因分析：
该问题源于iOS端对DOM树的特殊处理逻辑（类似Vue的渲染函数优化差异），uni-app在编译时未能完全规避此问题。虽然知识库未直接记录此v-if特例，但历史版本中多次修复过iOS渲染问题（如4.14版本修复的keep-alive渲染问题）。

建议：

优先采用您的解决方案（外层加view）
升级至最新正式版(4.85+)或alpha版(4.86+)，部分类似渲染问题已在迭代中修复
参考条件渲染文档规范写法

若问题仍存在，建议在ask-uni-app提交具体复现案例，标注HBuilderX版本号以便官方定位。

内容为 AI 生成，仅供参考

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

提供下 HBuilderX 和 vue 版本， ios 是 vue 还是 nvue？

2025-12-05 15:16 分享

1***@qq.com (作者)

ios， vue

"@dcloudio/uni-app": "3.0.0-4070520250711001",  

"@dcloudio/uni-app-harmony": "3.0.0-4070520250711001",  

"@dcloudio/uni-app-plus": "3.0.0-4070520250711001",  

"@dcloudio/uni-components": "3.0.0-4070520250711001",  

"@dcloudio/uni-h5": "3.0.0-4070520250711001",

2025-12-05 15:59

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

我使用下面代码，运行到 vue3+ios 真机+ 标准基座表现和 web 一致

<template>  
    <view v-if="visible" style="background-color: red">  
        <text>我能正常加载</text>  
    </view>  
    <sar-divider />  
    <view>  
        <view v-if="visible" style="background-color: blue">  
            <text>我能不能正常加载</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                visible: true  
            }  
        }  
    }  
</script>

你可以提供具体复现工程说明问题，你可使用 npx @dcloudio/uvm@latest alpha 升级最新依赖重新验证问题

2025-12-05 16:06 分享

1***@qq.com (作者)

是的 bro，仔细观察了你贴的代码，在 template->第二个 view你也采用了包裹，避免同级使用v-if。

同时我今天发现了另一个问题，会在打包后产生：

报错代码：

0:57:53.110 Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at uni-app-view.umd.js:7  

10:57:53.110 Uncaught TypeError: Cannot read properties of undefined (reading '$') at uni-app-view.umd.js:7  

10:57:53.110 Uncaught TypeError: Cannot read properties of undefined (reading 'remove') at uni-app-view.umd.js:7  

10:57:53.110 Uncaught TypeError: Cannot read properties of undefined (reading 'setAttr') at uni-app-view.umd.js:7  

10:57:53.110 /book/book-read,  http success,  [Object] {"data":{"code":1,"msg":"success"},"statusCode":200,"header":{"Access-Control-Allow-Headers...} at http/http.ts:22  

10:57:53.512 Uncaught TypeError: Cannot read properties of undefined (reading 'setAttr') at uni-app-view.umd.js:7  

10:57:53.974 Uncaught TypeError: Cannot read properties of undefined (reading 'remove') at uni-app-view.umd.js:7

经过引导AI 解答发现原因是因为：

1.初次渲染

<Header />  

<view>（审核视图）</view>  

<!-- 这里没有内容 -->

2.当信息异步加载完成后

<Header />  

<view>（审核视图）</view>  



<view>  

  <ContentPic />  

  <ContentText />  

  <Footer />  

</view>

两个树的结构变化幅度非常大 → iOS 渲染器无法 patch → 崩溃

? 重点在于这里两次渲染“不等价”：

• 初次渲染：没有 <view v-if="!!bookInfoDetail?.id">

• 二次渲染：突然多了一个 <view>，内部还包含 3 个复杂组件

大结构差异 + 多子组件更新 = iOS 最容易爆

所以最终结果，改为这样，打包后运行稳定不再报错：

<Header  

      visible-author  

      :author-data="bookInfoDetail?.user_info"  

      :on-setting-click="onSettingClick"  

    />  

    <view key="book-detail-status">  

      <view  

        v-if="bookInfoDetail?.status === ListStatus.PENDING"  

        class="h-[80rpx] flex items-center justify-center bg-black/30"  

      >  

        <text class="text-28 text-white">该作品正在审核中，耐心等待 </text>  

      </view>  

      <view  

        v-else-if="[ListStatus.REJECT, ListStatus.FREEZE].includes(bookInfoDetail?.status)"  

        class="box-border h-[80rpx] flex items-center justify-between px-[40rpx]"  

        @click="state.visibleReasonPopup = true"  

      >  

        <text class="text-28 text-[#F87171]">未通过审核，点击查看原因>> </text>  

        <view class="rounded-full bg-white px-[30rpx] py-[4rpx] text-[24rpx]"> 查看 </view>  

      </view>  

    </view>  

    <view key="book-detail-content">  

      <view v-if="!!bookInfoDetail?.id">  

        <ContentPic v-if="bookInfoDetail?.type_id === 2" :book-info="bookInfoDetail" />  

        <ContentText :book-info="bookInfoDetail" />  

        <Footer />  

      </view>  

    </view>

2025-12-08 11:11

DCloud_UNI_OttoJi

回复 1***@qq.com: 这是使用你提供的代码，你给的代码我无法运行，所以提供了完整单页面源码，看我的补充评论，我们先定位和复现问题。

2025-12-08 11:44
DCloud_UNI_OttoJi

回复 1***@qq.com: ai 的返回结果可能是幻觉，先明确提供复现工程和操作步骤。

2025-12-08 11:45

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

不要在评论区贴代码，新的问题独立提问。

2025-12-08 我是用你提供的代码运行到 vue3+ios 真机正常，按照你补充的删除掉 view 包裹

<template>  
    <view v-if="visible" style="background-color: red">  
        <text>我能正常加载</text>  
    </view>  
    <button @click="toggle">toggle</button>  
    <sar-divider />  
    <view v-if="visible" style="background-color: blue">  
        <text>我能不能正常加载</text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                visible: true  
            }  
        },  
        methods: {  
            toggle() {  
                this.visible = !this.visible  
            }  
        }  
    }  
</script>

运行到 vue3+ios真机表现正常，请根据我提供的代码来指出我应该如何修改你的代码，复现问题。

提供更多信息，有助于定位和解答你的问题，节约双方的时间。

2025-12-08 11:43 分享

要回复问题请先登录或注册

uniapp ios 下 v-if 不显示

4 个回复

公告

相关问题

uniapp ios 下 v-if 不显示

与内容相关的链接

4 个回复

公告

相关问题