uni-app swiper使用问题:在ios14.4中可以正常显示,在ios14.6中swiper内容无法显示

uni-app swiper使用问题:在ios14.4中可以正常显示,在ios14.6中swiper内容无法显示

产品分类

uniapp/App

PC开发环境操作系统

Windows

PC开发环境操作系统版本号

window10

HBuilderX类型

正式

HBuilderX版本号

3.1.22

手机系统

iOS

手机系统版本号

IOS 14

手机厂商

苹果

手机机型

iphone7 iphoneXs

页面类型

vue

打包方式

云端

项目创建方式

HBuilderX

App下载地址或H5网址

https://itunes.apple.com/cn/app/id1519167539?mt=8

示例代码

<!-- 顶部选项卡 -->  
<view class="nav-bar">  
    <view  
        v-for="(item, index) in navList"  
        :key="index"  
        :class="index == tabCurrentIndex ? 'nav-item current' : 'nav-item'"  
        :id="'tab' + index"  
        @click="tabClick(index)"  
    >  
        {{ item.text }}  
    </view>  
</view>  
<!-- 内容部分 -->  
<swiper :duration="300" :current="tabCurrentIndex" class="swiper-box" @change="changeTab">  
    <swiper-item style="overflow: scroll;" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">  
        <scroll-view class="list-scroll-content" scroll-y @scrolltolower="getEvents">  
            <!-- 空白页 -->  

            <view class="tab-content">  
                <view class="type-item" v-for="(item, i) in tabItem.actionList" :key="i" @click="checkTrans(item, tabIndex)">  

                    <view class="itemtitle">{{ item.represent }}</view>  
                    <view v-if="item.coverImg" style="width: 500upx;height: 300upx;position: relative;background-color: #ECECEC;">  
                        <image :src="baseImg + item.coverImg" style="width: 500upx;height: 300upx;margin-bottom: 20upx;"  mode="aspectFit"></image>  
                        <image src="../../static/play.png" style="width: 50upx;height: 50upx;position: absolute;left: 225upx;top: 125upx;"></image>  
                    </view>  
                    <view class="imgListView" v-else>  
                        <view v-for="(itemImg, index) in item.imgList" :key="'img' + index">  
                            <image class="imgview" :src="baseImg+itemImg" mode="aspectFill"></image>  
                        </view>  
                    </view>  
                    <view class="bottomItem">  
                        <text>{{item.createDate}}</text>  
                        <image class="plimg" src="../../static/img/pinglun.png" style="width: 20upx;height: 20upx;"></image>  
                        <text>评论</text>  
                        <view class="zanview" v-if="tabCurrentIndex==1"  @tap.stop="addStar(item,i)">  
                            <image class="zanimg" :src="item.starFlag=='1'?'../../static/img/zan.png':'../../static/img/unzan.png'" style="width: 20upx;height: 20upx;"></image>  
                            <text>赞一下</text>  
                        </view>  
                        <view class="tousuview" @tap.stop="tousuClick(item,i)">  
                            举报屏蔽  
                        </view>  
                    </view>  

                </view>  
            </view>  
            <!-- 没有文件 -->  
            <view class="no-list" v-if="tabItem.noList">  
                <image src="/static/empty.png" mode=""></image>  
                <view style="color: #CCCCCC;font-size: 24upx;">暂无数据</view>  
            </view>  
            <uni-load-more :status="tabItem.loadingType" v-else></uni-load-more>  
        </scroll-view>    
    </swiper-item>  
</swiper>  

scss样式

/* 顶部tabbar */
.nav-bar {  
    display: flex;  
    height: 80upx;  
    position: relative;  
    align-items: center;  
    z-index: 10;  
    width: 100%;  
    background-color: #FFFFFF;  
    .nav-item {  
        flex: 1;  
        height: 100%;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        font-size: 30upx;  
        color: #666;  
        position: relative;  
        &:after {  
            content: '';  
            width: 0;  
            height: 0;  
            border-bottom: 4upx solid #09BF82;  
            position: absolute;  
            left: 50%;  
            bottom: 0;  
            transform: translateX(-50%);  
            transition: 0.3s;  
        }  
    }  
    .current {  
        color: #09BF82;  
        &:after {  
            width: 30%;  
        }  
    }  
}  
.list-scroll-content {  
    height: 100%;  
}  

.swiper-box {  
    height: calc(100% - 80upx);  
    width: 100%;  
    .tab-content {  
        display: flex;  
        flex-direction: column;  
        padding: 0 30upx;  
        .type-item {  
            display: flex;  
            flex-direction: column;  
            padding: 20upx 0upx;  
            border-bottom: 1upx solid #dddddd;  
            color: #666;  
            font-size: 30upx;  
            margin-bottom: 20upx;  
            .imgListView{  
                display: flex;  
                flex-wrap: wrap;  
                .imgview{  
                    margin-right: 20upx;  
                    margin-top: 10upx;  
                    width: 180upx;  
                    height: 180upx;  
                }  
            }  
            .bottomItem{  
                display: flex;  
                align-items: center;  
                justify-content: flex-start;  
                color: #999;  
                font-size: 22upx;  
                .plimg{  
                    margin-left: 30upx;  
                    margin-right: 10upx;  
                }  
                .zanview{  
                    color: #999;  
                    font-size: 22upx;  
                    .zanimg{  
                        margin-left: 30upx;  
                        margin-right: 10upx;  
                    }  
                }  
                .tousuview{  
                    margin-left: 40upx;  
                    color: #999;  
                    font-size: 22upx;  
                }  
            }  
        }  
    }  
}  

.no-list {  
    text-align: center;  
    padding-top: 280upx;  
    image {  
        width: 361upx;  
        height: 309upx;  
    }  
}

更多关于uni-app swiper使用问题:在ios14.4中可以正常显示,在ios14.6中swiper内容无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

实际显示图片




更多关于uni-app swiper使用问题:在ios14.4中可以正常显示,在ios14.6中swiper内容无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS 14.6系统兼容性问题。从代码分析,问题可能出现在以下几个方面:

  1. swiper-item嵌套scroll-view的兼容性:在iOS 14.6中,swiper-item内直接嵌套scroll-view可能出现渲染异常。建议将style="overflow: scroll;"从swiper-item移到内部的scroll-view上。

  2. 高度计算问题:将swiper-box样式中的高度计算改为:

.swiper-box {
    height: calc(100vh - 80upx);
    width: 100%;
}
  1. scroll-view高度设置:确保list-scroll-content有明确的高度:
.list-scroll-content {
    height: 100vh; /* 或具体数值 */
}
  1. 图片加载优化:iOS 14.6对图片加载更严格,建议给所有image标签添加加载失败处理:
<image :src="baseImg + item.coverImg" @error="handleImageError" ... />
  1. 尝试添加强制重绘:在mounted或onShow生命周期中调用:
this.$nextTick(() => {
    this.tabCurrentIndex = this.tabCurrentIndex;
});
回到顶部