uni-app中swiper组件在真机上不渲染

开发环境	版本号	项目创建方式
Windows	w10	HBuilderX

### 示例代码：


```html
<swiper style="width: 100%;height: 100vh; top: 0; position: absolute;" :vertical="true" :duration="500"  
        :circular="true" @change="changefun">  
        <block style="width: 100%;height: 100vh;" v-for="item in videoList">  
            <swiper-item style="width: 100%;height: 100vh;">  
                <view class="videoHome">  
                    <video class="video" :src='item.file_id' :loop="true" :id="item.id" :custom-cache="false"  
                        :show-center-play-btn="false" :enable-play-gesture="true" :controls="false"  
                        :enable-progress-gesture="true"></video>  
                    <view class="funcArea">  
                        <view class="accountInfo" @click="goVideoHome(item.video_customer_id)">  
                            <image :src='item.wechat_avatar'></image>  
                        </view>  
                        <view class="shareFunc">  
                            <view class="funcBtn">  
                                <image src="../../static/images/shortvideo/collection.png" mode="widthFix"  
                                    style="width: 30px;height: 30px;" v-show="!isStar" @click="confirmStar(item.id)"></image>  
                                <image src="../../static/images/shortvideo/collectioned.png" mode="widthFix"  
                                    style="width: 30px;height: 30px;" v-show="isStar" @click="cancelStar(item.id)"></image>  
                                <text style="color: #DBDBDB;font-size: 14px;">{{videoInfo.star}}</text>  
                            </view>  
                            <view class="funcBtn" @click="getComment(item.id,1)">  
                                <image src="../../static/images/shortvideo/comment.png" mode="widthFix"  
                                    style="width: 30px;height: 30px;"></image>  
                                <text style="color: #DBDBDB;font-size: 14px;">{{videoInfo.comment}}</text>  
                            </view>  
                            <button open-type="share" class="funcBtn" style="background: rgba(0,0,0,0)">  
                                <image src="../../static/images/shortvideo/shareVideo.png" mode="widthFix"  
                                    style="width: 30px;height: 30px;"></image>  
                                <text style="color: #DBDBDB;font-size: 14px;">{{videoInfo.like}}</text>  
                            </button>  
                        </view>  
                    </view>  
                    <view class="goodIntroduce">  
                        <view class="recommend" v-show="item.product_id !== 0">  
                            <view>  
                                <image :src="productInfo.image"  
                                    style="width: 50px;height: 50px;border-radius: 7px;margin:0 5px;"  
                                    mode="scaleToFill"></image>  
                            </view>  
                            <view>  
                                <view style="font-size: 14px;margin-bottom: 5px;">Video same product</view>  
                                <view style="font-size: 14px;">recommendation</view>  
                            </view>  
                            <button class="detail_btn" @click="goDetail()">  
                                Detail  
                            </button>  
                        </view>  
                        <view style="margin-bottom: 10px;font-size: 18px;">@{{item.firstname}}</view>  
                        <view>{{item.desc}}</view>  
                    </view>  
                </view>  
            </swiper-item>  
        </block>  
    </swiper>

操作步骤：

预期结果：

1111

实际结果：

bug描述：

在swiper中内嵌video，在微信开发者平台上面正常显示，但是在真机调试上，某些swiper-item会不渲染在video上的东西，需要下滑才会再次出现。

更多关于uni-app中swiper组件在真机上不渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼

更多关于uni-app中swiper组件在真机上不渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 中使用 swiper 组件时，如果在真机上不渲染，可能是由于以下几个原因导致的。以下是一些常见的排查和解决方法：

1. 检查 `swiper` 组件的代码

确保 swiper 组件的代码正确，且没有语法错误。以下是一个基本的 swiper 示例：

<template>
  <view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item>
        <view class="swiper-item">Slide 1</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">Slide 2</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">Slide 3</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style>
.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}
</style>

2. 检查样式问题

确保 swiper 和 swiper-item 的样式正确，尤其是高度和宽度。如果高度为 0，swiper 将无法显示。可以尝试为 swiper 设置固定高度：

swiper {
  height: 200px; /* 设置一个固定高度 */
}

3. 检查数据绑定

如果 swiper 的内容是通过数据动态渲染的，确保数据已经正确加载。例如：

<template>
  <view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="swiper-item">{{ item }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['Slide 1', 'Slide 2', 'Slide 3']
    };
  }
};
</script>

4. 检查平台兼容性

uni-app 的 swiper 组件在不同平台（如 H5、小程序、App）上的表现可能有所不同。确保代码在目标平台上兼容。如果需要针对特定平台做适配，可以使用条件编译：

<!-- #ifdef H5 -->
<swiper>
  <!-- H5 平台专用代码 -->
</swiper>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<swiper>
  <!-- 微信小程序平台专用代码 -->
</swiper>
<!-- #endif -->

5. 检查真机调试工具

在真机上调试时，使用 uni-app 提供的真机调试工具（如 HBuilderX 的真机调试功能）查看是否有错误日志。如果有错误信息，可以根据提示进行修复。

6. 检查 `swiper` 组件的版本

确保使用的 uni-app 版本是最新的，旧版本可能存在 swiper 组件的兼容性问题。可以通过以下命令更新 uni-app：

npm install -g @vue/cli

7. 检查网络请求

如果 swiper 的内容依赖于网络请求，确保请求已经成功返回数据，并且在数据返回后再渲染 swiper。可以使用 v-if 控制渲染时机：

<swiper v-if="list.length > 0">
  <swiper-item v-for="(item, index) in list" :key="index">
    <view class="swiper-item">{{ item }}</view>
  </swiper-item>
</swiper>

8. 检查真机环境

某些真机环境（如低版本 Android 或 iOS）可能存在兼容性问题。可以尝试在其他设备上测试，或者更新设备的系统版本。

9. 使用 `scroll-view` 替代

如果 swiper 组件在真机上仍然无法渲染，可以尝试使用 scroll-view 实现类似的效果：

<scroll-view scroll-x="true" style="white-space: nowrap;">
  <view style="display: inline-block; width: 100%;">Slide 1</view>
  <view style="display: inline-block; width: 100%;">Slide 2</view>
  <view style="display: inline-block; width: 100%;">Slide 3</view>
</scroll-view>